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提供一个钩子......

例如，使用以下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直接定位到文本项，但为什么不呢？在这种情况下，您将使用此类CSS查询“text”并对其使用addCls：

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

不言而喻，通过使用相同的查询和removeCls方法删除CSS类，您将恢复组件看起来“未禁用”。

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

1 个答案: