ExtJS表单内combo box设置disabled属性后未整体置灰的问题咨询

你遇到的禁用不置灰问题，核心原因通常是ExtJS默认的禁用样式被外层Form的自定义CSS覆盖，或是早期版本的Combo配置漏开了全组件样式开关，可通过以下配置直接实现效果：

可直接生效的配置项说明 #

• 无需额外写自定义覆盖逻辑，优先显式开启组件自带的强制禁用样式开关：useDisabledStyle: true
  该配置会让Combo在触发禁用状态时，主动给整个组件包裹层（包含输入框、下拉触发按钮、FieldLabel）应用默认的灰化透明度样式，不会因为外层Form的类名继承跳过样式渲染。
• 自定义禁用类名绕开样式覆盖：通过disabledCls属性指定专属的禁用态类名
  当你遇到默认的.x-item-disabled类被外层Form的自定义样式用高优先级覆盖时，这个配置可以让Combo禁用时直接绑定你指定的类名，绕开默认样式被覆盖的问题，类名的灰化规则可以按需要调整，比如把组件透明度设为0.5、文字色改为中灰、输入框背景改浅灰，达成全组件置灰的效果。
• 动态控制禁用时优先用组件自带的setDisabled()方法，不要直接操作DOM改disabled属性，否则会漏触发样式渲染逻辑，出现禁用但是样式不变的问题。

调整后的可直接复用的配置代码 #

Ext.define('something....', {
    controller: 'some Controller',
    initComponent: function() {
        var me = this;
        me.items = [{
            xtype: 'form',
            items: [{
                xtype: 'combo',
                itemId: 'nameId',
                name: 'nameId',
                labelAlign: 'top',
                fieldLabel: 'Name',
                store: me._getNames(),
                valueField: 'dataId',
                displayField: 'name.firstName',
                editable: false,
                disabled: someCondition ? true : false,
                // 新增配置解决全组件置灰问题
                useDisabledStyle: true,
                disabledCls: 'full-gray-combo-disabled'
            }]
        }];
        me.callParent();
    }
})

常见排查点 #

如果加完配置还是没有整体置灰效果，可以检查两点：

• 外层Form是否给表单项加了带!important的固定背景色、文字色样式，把Combo的禁用样式顶掉了，这种情况只要把自定义禁用类的CSS选择器优先级提到比Form自定义样式高即可
• 确认没有因为labelAlign: 'top'的配置，触发ExtJS 6.x早期版本的样式bug，该版本的这个布局下默认不会给顶部Label加禁用灰化，用上面的专属disabledCls补个Label的灰化样式就能覆盖。

内容的提问来源于stack exchange，提问作者Ash