Fieldset /w Dynamic Controls (2)

ExtJS 4.1 Update (5/21/2012)

Fieldset Icon

In this example you will get a gold nugget. ExtJS4 shipped without support for fieldsetĀ icons. This is most unfortunate, considering ExtJS 3 had them.

You will need the following “fix”:

DEMO & SOURCE @ JSFIDDLE

CSS

/* Full credit to Evan Trimboli */
.x-fieldset-header-icon, .ext-ie .x-fieldset-header-icon {
    padding-left: 18px !important;
    background-repeat: no-repeat;
}

JS

// Full credit to Evan Trimboli
// Fieldsets will now support iconCls attribute
 
Ext.require('Ext.form.*');
 
Ext.onReady(function(){
 
    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: '',
                    ownerCt: this,
                    getElConfig: function(){
                        return {
                            tag: 'legend',
                            cls: this.baseCls + ' ' + iconCls,
                            children: [{
                                cls: Ext.baseCSSPrefix + 'clear'
                            }]
                        };
                    },
                    items: legendItems
                });
            }
 
            // Make sure legend is rendered if the fieldset is rendered
            if (legend && !legend.rendered && me.rendered) {
                me.legend.render(me.el, me.body); //insert before body element
                me.legend.ownerCt = me;
            }
        }
    });
 
});

Next -> Basic Textfield Input Layout

VN:F [1.9.22_1171]
Rating: 6.3/10 (4 votes cast)
Fieldset /w Dynamic Controls (2), 6.3 out of 10 based on 4 ratings

2 thoughts on “Fieldset /w Dynamic Controls (2)”

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *