View Full Version : Disabling checkboxfield checkbox but not its label

19 Apr 2012, 11:33 PM
Hi all,

I want the disable the checkboxfield so that the user cannot change the value of the checkbox. If I set disabled:true, the whole field including the label is disabled (I dont want to disable the label; it should appear normally). If I set readOnly:true, then the field is read-only and cannot be changed but visually appears to be enabled and the user may try clicking it. Is there some simple way of doing this?


19 Apr 2012, 11:38 PM

Try thing differently, using 2 containers embeded in one (column is better for v-align ;-) :

One for the label
One for the checkbox

19 Apr 2012, 11:53 PM
Thanks for your response. that is what i was also thinking about doing (and have done now as a temporary solution) but this is not the most efficient way :( I was hoping to get some solution by changing the class for the label or checkbox...

20 Apr 2012, 12:00 AM
Effectively 'nested' container slow down the application... but in some case this is the 'quick' way to resolve this kind of "feature"...

Or maybe try an 'addClass' (note that "disable" items are done with opacity...a nightmare !)

20 Apr 2012, 12:03 AM
Yes this is infact a quick way to resolve this problem.

20 Apr 2012, 12:39 AM
Ext 4.0

.x-item-disabled, .x-item-disabled .x-form-item-label {
opacity: 1 !important;
.x-item-disabled .x-form-item-body {
opacity: .3;

Ext 4.1

table.x-item-disabled, table.x-item-disabled .x-form-item-label {
opacity: 1;