ExtJS中禁用組件的樣式不一致

Question

我有一個ExtJS表單，該表單使用hbox-layout容器創建包含表單輸入的句子，並且需要在某些條件下禁用該表單。 hbox-layout容器具有一系列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直接定位到文本項，但是為什么不呢？ 在這種情況下，您將使用這種CSS查詢“文本”並在其上使用addCls ：

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

不用說，通過使用相同的查詢和removeCls方法刪除CSS類，可以將組件的外觀恢復為“未禁用”。