Last year I had this working with ExtJS 4.0.x – see here.
Since ExtJS 4.1 came out, Sencha made some significant changes to the internal structure of the fieldset and this customization stopped working. Here’s newest override that will work with 4.1:
CSS
/* iconCls property of the fieldset */ .icon-properties { background-image: url(https://whatisextjs.com/BAHO/icons/table.png) !important;} /* Icons on fieldsets */ .x-fieldset-header-icon, .ext-ie .x-fieldset-header-icon { padding-left: 18px !important; background-repeat: no-repeat; } |
JS
// ExtJS 4.1.0 support for fieldset icons Ext.form.FieldSet.override({ createLegendCt: function(){ var me = this, hasIcon = !!me.iconCls, items = [], legend = { xtype: 'container', baseCls: this.baseCls + '-header' + (hasIcon?' '+me.iconCls+' '+me.baseCls+'-header-icon':''), id: me.id + '-legend', autoEl: 'legend', items: items, ownerCt: me, ownerLayout: me.componentLayout }; // Checkbox if (me.checkboxToggle) { items.push(me.createCheckboxCmp()); } // Toggle button else if (me.collapsible) { items.push(me.createToggleCmp()); } // Title items.push(me.createTitleCmp()); return legend; } }); |
great share, thanks a lot.. I think it’s a big miss in Ext JS 4.1.x..
and how can is use it with extjs 4.2?