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

//**************************//
// R E A D Y
//**************************//

Ext.onReady(function(){
    // Add support for fieldset icons
    implementFieldsetIcon();
    
    // Register controller
    Ext.application({name: 'MyCompany', controllers: ['FieldsetDynamicControls']});

    // Create 2 fieldsets
    Ext.create('Ext.container.Container',{
        renderTo: Ext.getBody()
        , defaults: { 
            xtype: 'mc_fieldsetdynamiccontrols'
            , margin: 10 
        }
        , items: [
            { title: 'Search Filter 1' }
            , { title: 'Search Filter 2' }
        ]
    });
    
}); // eo onReady

//**************************//
// M O D E L
//**************************//   

Ext.namespace('MyCompany.globals.FieldsetDynamicControls');

// Represents an input on the fieldset
Ext.define('MyCompany.model.FieldsetDynamicControls', {
    extend: 'Ext.data.Model'
    , fields: ['name','label']
});

// Possible inputs
MyCompany.globals.FieldsetDynamicControls.possibleValues = [
    { label: 'Display Name', name: 'displayName' }
    , { label: 'First Name', name: 'givenName' }
    , { label: 'Middle Name', name: 'initials' }
    , { label: 'Last Name', name: 'sn' }
];

// first field shown on the form
MyCompany.globals.FieldsetDynamicControls.defaultFieldName = 'givenName';

//**************************//   
// V I E W
//**************************//   

Ext.define('MyCompany.view.FieldsetDynamicControls', {
    extend: 'Ext.form.FieldSet'
    , alias: 'widget.mc_fieldsetdynamiccontrols' // xtype == mc_fieldsetdynamiccontrols
    
    , initComponent: function () {
        var me = this;
        
        me.addEvents('addcontrol','removecontrol');
        
        var config = {
            title: 'Search Filter'
            , width: 300
            , collapsible: true
            , iconCls:...