Fieldset /w Dynamic Controls (8)

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

Ext.define("MyCompany.controller.FieldsetDynamicControls", {
   extend: "Ext.app.Controller"
 
   , init: function() {
        var controller = this;
        controller.control({
 
            'mc_fieldsetdynamiccontrols' : {
                // set default UI attribute
                beforerender: function(fieldset) {
                    controller.addControl(fieldset, MyCompany.globals.FieldsetDynamicControls.defaultFieldName);
                }
                , addcontrol: function(fieldset) {
                    var menu = fieldset.down('button[name=add]').menu
                        , combo = menu.down('combo')
                        , name = combo.getValue();
                    if ( !name ) return;
                    controller.addControl(fieldset, name);
                    menu.hide();
                }
                , removecontrol: function(fieldset, field, record) {
                    controller.removeControl(fieldset, field, record);
                }
            } // EO 
 
        });
   }
 
    // 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
        field = fieldset.add({
            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
        });
        field.focus();
 
        // Remove from "Add Direct Attr" combo
        combo.clearValue();
        combo.getStore().remove(record);
    }
 
    , removeControl: function(fieldset, field, record) {
        var combo = fieldset.down('button[name=add]').menu.down('combo');
        field.destroy();
        combo.getStore().add(record);
        combo.getStore().sort();
    }
});