ExtJS 4.1 Fieldset Icons

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;
        }
    });
VN:F [1.9.22_1171]
Rating: 5.8/10 (9 votes cast)
ExtJS 4.1 Fieldset Icons, 5.8 out of 10 based on 9 ratings

3 thoughts on “ExtJS 4.1 Fieldset Icons”

  1. great share, thanks a lot.. I think it’s a big miss in Ext JS 4.1.x..

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (2 votes cast)

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *