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

Question

我有一个 ExtJS 表单，它使用 hbox-layout 容器来创建包含表单输入的句子，并且需要在特定条件下禁用该表单。 hbox-layout 容器有一系列radio、text、checkbox 和textfield 组件。你可以看一个例子 on jsfiddle .

This is an answered question here on SO that doesn't fully work for me因为如果禁用不是字段的内容(例如我正在使用的 text 组件)，禁用样式会有所不同 - 它似乎会屏蔽组件而不是仅仅使文本变灰。当禁用嵌套组件时，蒙版渐变会叠加。 this jsfiddle 说明了这种情况的示例.

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

Answer 1

您必须亲自挑选每个样式修复，但是是的，这是完全可能的。只需 addCls 为您的 CSS 提供一个钩子(Hook)...

例如，使用以下 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 类，您可以将组件恢复为“未禁用”。