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”:
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
Fieldset /w Dynamic Controls (2),
2 thoughts on “Fieldset /w Dynamic Controls (2)”