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;}
.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/fieldset-w-dynamic-controls-3

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

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;'
        , defaults: { // applies to every "item" below
            xtype: 'textfield'
            , fieldLabel: 'Test'
            , msgTarget: 'under'
            , anchor: '-25'    
            , allowBlank: false
        }
        , items: [
            {},{},{} // will use "defauts" configuration
        ]
    });
    
    
});

function implementFieldsetIcon() {
    
    // Credit: Evan Trimboli
    Ext.form.FieldSet.override({
        initLegend: function(){
            var me = this, 
                legendItems, 
                legend = me.legend, 
                iconCls = me.iconCls,
                hasIcon = !!iconCls;
    
            // Create the legend component if needed and it hasn't been already
            if (!legend && (me.title || me.checkboxToggle || me.collapsible)) {
                legendItems = [];
    
                // Checkbox
                if (me.checkboxToggle) {
                    legendItems.push(me.createCheckboxCmp());
                }                // Toggle button
                else if (me.collapsible) {
                    legendItems.push(me.createToggleCmp());
                }
    
                // Title
                legendItems.push(me.createTitleCmp());
    
                legend = me.legend = Ext.create('Ext.container.Container', {
                    baseCls: me.baseCls + '-header' + (hasIcon ? ' ' + me.baseCls + '-header-icon' : ''),
                    autoEl: 'legend',
                    ariaRole: '',
        ...