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(){
        if(this.getItemCt) {
            var label = this.getItemCt().child('label');
            if (label) label.addClass(['find-label-disabled', 'x-item-disabled']);
    onEnable : function(){
        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.


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s