JSFiddle - React, Tailwind, and code Playground

by YangHax

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
<html>
    <head>
        <title>ExtJS 4 Extension: Fieldset /w Dynamic Controls</title>
    </head>
    <body>
    </body>
</html>

CSS

.icon-properties { background-image: url(http://whatisextjs.com/BAHO/icons/table.png) !important;}
.icon-add{ background-image: url(http://whatisextjs.com/BAHO/icons/add.png) !important;}
.icon-remove{ background-image: url(http://whatisextjs.com/BAHO/icons/delete.png) !important;}
.x-fieldset-header-text { font-weight: bold; }
.x-fieldset {background-color: #F1F1F1;}
 /* Icons on fieldsets */
.x-fieldset-header-icon, .ext-ie .x-fieldset-header-icon {
    padding-left: 18px !important;
    background-repeat: no-repeat;
}

JavaScript

// BLOG ExtJS 4 Extension: Fieldset /w Dynamic Controls
// http://whatisextjs.com/extjs-4-extension/16-extjs-4-extension-fieldset-w-dynamic-controls

//**************************//                        

Ext.onReady(function(){
    
    implementFieldsetIcon();

    Ext.create('Ext.form.FieldSet',{
        title: 'Search Filter'
        , renderTo: Ext.getBody()
        , width: 300
        , collapsible: true
        , iconCls: 'icon-properties'
        , style: 'background-color: #F1F1F1; margin: 30px auto;'
               + 'position: relative;' // support the [+] button
        , items:
        [
            {  // [Add] button with dropdown menu
                xtype: 'button'
                , style: 'position: absolute; top: ' + (Ext.isIE||Ext.isChrome?0:-20) + 'px; right: 20px;'
                , iconCls: 'icon-add'
                // drop-down menu
                , menu: Ext.create('Ext.menu.Menu', {
                    plain: true
                    , items: [
                        { html: '<b>Attribute</b>' }
                        , {
                            xtype: 'combo' 
                            , queryMode: 'local'
                            , displayField: 'label'
                            , valueField: 'name'
                            , typeAhead: true
                            , store: Ext.create('Ext.data.Store', {
                                fields: ['name','label']
                                , data: [
                                    { label: 'Display Name', name: 'displayName' }
                                    , { label: 'First Name', name: 'givenName' }
                                    , { label: 'Middle Name', name: 'initials' }
                                ]
                                , sorters: [ { property: 'label' } ]
                            }) // eo store
                        } // eo combo
                    ] // eo items
                    , bbar: [ '->', { xtype: 'button',...