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

Question

我有一个 ExtJS 表单，它使用 hbox 布局容器来创建包含表单输入的句子，并且需要在某些情况下禁用表单。hbox布局容器有一系列radio、text、checkbox和textfield组件。你可以在jsfiddle上看到一个例子。

这是关于SO的一个已回答的问题，它对我并不完全有效，因为如果您禁用不是字段的内容（例如我正在使用的text组件），则禁用样式会有所不同-它似乎掩盖了组件，而不仅仅是使文本变灰。禁用嵌套组件时，遮罩渐变将堆叠。此 jsfiddle 上说明了此方案的示例。

有没有办法在禁用时覆盖text处理其样式的方式？我认为这可能是最简单的解决方案。

Answer 1

您必须精心挑选每个样式修复，但是是的，这是完全可能的。只是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直接定位到文本项，为什么不呢？在这种情况下，您将查询"文本"并在其上使用addCls，使用这种 CSS：

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

不用说，您将通过删除具有相同查询和removeCls方法的 CSS 类来将组件外观恢复为"未禁用"。