Ext JS Disabling Form Field Labels

Making a form field label look disabled when the form field is disabled by adding an override to Ext JS.

Ext.override(Ext.form.Field, {
    onDisable : function(){
        Ext.form.Field.superclass.onDisable.call(this);
        if(this.getItemCt) {
            var label = this.getItemCt().child('label');
            if (label) label.addClass(['find-label-disabled', 'x-item-disabled']);
        }
    },
    onEnable : function(){
        Ext.form.Field.superclass.onEnable.call(this);
        if(this.getItemCt) {
            var label = this.getItemCt().child('label');
            if(label) label.removeClass(['find-label-disabled', 'x-item-disabled']);
        }
    }
});

In this specific case, I had to add

	.find-label-disabled {
		background-color: white;
	}

since the background was white and I didn’t want funny green text.

Unfortunately, I no longer have the link to the posting in the Ext JS forums.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s