0

I have an ExtJS form that uses hbox-layout containers to create sentences that contain form inputs and there is a requirement to disable the form under certain conditions. The hbox-layout containers have a series of radio, text, checkbox, and textfield components. You can see an example on jsfiddle.

This is an answered question here on SO that doesn't fully work for me because if you disable something that isn't a field (like the text component I'm using) the disable style is different - it appears to mask the component instead of just graying out the text. When nested components are disabled, the mask gradients stack. Examples of this scenario are illustrated on this jsfiddle.

Is there a way to override how text handles its styling when it becomes disabled? I think that may be the easiest solution.

Community
  • 1
  • 1
anjunatl
  • 1,027
  • 2
  • 11
  • 24

1 Answers1

0

You'll have to handpick each style fix, but yes that's completely possible. Just addCls to give a hook for your CSS...

For example, using the following CSS:

.my-disabled-ct text {
    opacity: .3;
}

You can give a similar disabled look both to fields and text items with the following code:

var rootCt = Ext.getCmp('lotsOfItems');
rootCt.query('field').forEach(function(field) {
    field.disable();
});
rootCt.query('container').forEach(function(ct) {
    ct.addCls('my-disabled-ct');
});

You should probably avoid using disable on field since Ext put a mask over them then (though you could probably hide it with CSS).

You could add the class and target the CSS directly to text items however, why not? In this case, you would query for 'text' and use addCls on them, with this kind of CSS:

text.my-disabled-cls {opacity: .3;}

That goes without saying that you'll restore your components look to "not disabled" by removing the CSS class with the same query and the removeCls method.

rixo
  • 23,815
  • 4
  • 63
  • 68