What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

21May/122

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(http://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: 6.1/10 (8 votes cast)
ExtJS 4.1 Fieldset Icons, 6.1 out of 10 based on 8 ratings
Comments (2) Trackbacks (1)
  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)
  2. and how can is use it with extjs 4.2?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *