Css ExtJS中禁用组件的样式不一致

我有一个ExtJS表单，它使用hbox布局容器创建包含表单输入的句子，并且在某些条件下需要禁用表单。hbox布局容器有一系列的

无线电

，

文本

，

复选框

，以及

文本字段

组件。你可以看到一个例子

因为如果禁用非字段的内容（如我正在使用的

text

组件），禁用样式会有所不同-它似乎会屏蔽该组件，而不仅仅是使文本变灰。禁用嵌套组件时，遮罩渐变将堆叠。此场景的示例如所示

---

当

文本被禁用时，是否有方法覆盖它如何处理其样式？我认为这可能是最简单的解决方案。
您必须手工选择每个样式修复，但是的，这是完全可能的。只需
addCls
为CSS提供一个钩子

例如，使用以下CSS：

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

您可以使用以下代码为字段和文本项提供类似的禁用外观：

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

您可能应该避免在字段上使用
disable
，因为Ext会在它们上面加上一个掩码（尽管您可能会用CSS隐藏它）

您可以添加类并将CSS直接指向文本项，但为什么不呢？在这种情况下，您将查询“text”，并对其使用
addCls
，使用这种CSS：

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

不用说，通过使用相同的查询和
removeCls
方法删除CSS类，可以将组件外观恢复为“未禁用”