View Full Version : disabled items too light?

1 May 2012, 11:29 AM
We noticed that we went from 3.3 to 4.0.7 that disabled items seemed much "lighter" than previously (too light IMO) and the labels were now "grayed".


We overrode the default item-disabled css to get back to 3.3 like disabled fields (This works in FF, labels are still grayed in IE8 due to the 'disabled' attribute)

.x-item-disabled{ opacity: 0.8;}
.x-item-disabled label.x-form-item-label{color: black !important;}
.x-item-disabled .x-form-field{color: gray !important;}

Now w/ upgrading to 4.1.0, my CSS has been superseded. Obviously this override will we susceptible to breaking should the generated ext dom change, which I guess it did. It would be nice to have an easier way to control the disablement of fields and labels. Personally the 3.3 was the way to go, not sure why it changed.

Previous thread on this


1 May 2012, 11:23 PM
you can try to use "disabledCls (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-disabledCls)". which actually by default points to .x-item-disabled

2 May 2012, 7:11 AM
Thanks for the suggestion. I'm looking for a global change so I'll need to tweak the CSS, again. Or I guess I could override AbstractComponent disabledCls.