Fieldset /w Dynamic Controls (9)

// Represents an input on the fieldset
Ext.define('MyCompany.model.FieldsetDynamicControls', {
    extend: 'Ext.data.Model'
    , fields: ['name','label','config']
});
 
// 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' }
    , {
        label: 'Checkbox'
        , name: 'checkbox'
        , config: { xtype: 'checkbox' }
    }
    , {
        label: 'Combo'
        , name: 'combo'
        , config: { xtype: 'combo' }
    }
    , {
        label: 'Number'
        , name: 'number'
        , config: { xtype: 'numberfield' }
    }
    , {
        label: 'Date'
        , name: 'date'
        , config: { xtype: 'datefield' }
    }
];

// Adds an input to the fieldset
, addControl: function(fieldset, name) {
    var controller = this
        , menu = fieldset.down('button[name=add]').menu
        , combo = menu.down('combo')
        , record = combo.findRecord('name',name)
        , field = null;
 
    // Add UI element
    var uiConfig = {
        xtype: 'textfield'
        , name: name
        , fieldLabel: record.data.label
        , msgTarget: 'under'
        , anchor: '-25'
        , allowBlank: false
        , listeners : {
            // Add "remove" button
            afterrender: function(tf) {
                var el = tf.bodyEl.createChild({tag: 'div', style: 'position: absolute; right: -23px; top: 0px;'});
                tf.innerButton = Ext.create('Ext.button.Button',{
                    renderTo: el
                    , iconCls: 'icon-remove'
                    , handler: function() {
                        // Fire custom event
                        fieldset.fireEvent('removecontrol'
                                           , fieldset
                                           , field
                                           , record);
                    }
                });
            }
            // Our button does not get destroyed when we
            // destroy the parent textfield or the parent fieldset
            , destroy: function(tf) { tf.innerButton.destroy(); }
        } // eo listeners
    };
    Ext.apply(uiConfig, record.data.config); // use custom config
    field = fieldset.add(uiConfig);
    field.focus();
 
    // Remove from "Add Direct Attr" combo
    combo.clearValue();
    combo.getStore().remove(record);
}