在 extjs 中启用/禁用复选框答案

【问题标题】：Enable/disable checkbox in extjs在 extjs 中启用/禁用复选框
【发布时间】：2012-02-08 14:58:56
【问题描述】：

我想在 EXTJS 中启用或禁用复选框

 dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            xtype: 'radiofield',
            id: 'all',
            name: 'show',
            boxLabel: 'All',
            checked: true,
            inputValue: 'all'
        }, {
            xtype: 'radiofield',
            id: 'online',
            name: 'show',
            boxLabel: 'Online',
            inputValue: 'online'
        }, {
            xtype: 'radiofield',
            id: 'offline',
            name: 'show',
            boxLabel: 'Offline',
            inputValue: 'offline'
        }, {
            xtype: 'checkboxfield',
            id: 'cb1',
            boxLabel: 'Sometimes',
            checked: true,
            inputValue: 'sometimes'
        }, {
            xtype: 'checkboxfield',
            id: 'cb2',
            boxLabel: 'Always',
            checked: true,
            inputValue: 'always'
        }],
        listeners: {
            change: function (field, newValue, oldValue) {
                var value = newValue.show;
                if (value == 'all') {
                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.disable();
                    cb2.disable();
                }
                if (value == 'online') {
                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.disable();
                    cb2.disable();
                }
                if (value == 'offline') {

                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.enable();
                    cb2.enable();

                }

            }
        }
    }]

如何启用这些复选框？当用户选择离线选项时应该启用它们，当用户选择其他选项时应该禁用它们。

感谢您的帮助！

【问题讨论】：

标签： extjs checkbox radio-button

【解决方案1】：

我注意到几个错误：

复选框组件不能直接被它们的id 引用，你可以用 Ext.getCmp('id') 来调用它们。

上面示例中的侦听器已附加到工具栏，该工具栏没有change 事件。您需要将它附加到收音机上。

实际上，如果您只希望在填充“离线”单选时启用复选框，那么我建议将handler 配置添加到“离线”单选，并根据此值启用或禁用复选框收音机改成。例如，这有效：

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'radiofield',
        id: 'all',
        name: 'show',
        boxLabel: 'All',
        checked: true,
    }, {
        xtype: 'radiofield',
        id: 'online',
        name: 'show',
        boxLabel: 'Online',
        inputValue: 'online',
    }, {
        xtype: 'radiofield',
        id: 'offline',
        name: 'show',
        boxLabel: 'Offline',
        inputValue: 'offline',
        handler: function(field, value) {
            if (value) {
                Ext.getCmp('cb1').enable();
                Ext.getCmp('cb2').enable();
            } else {
                Ext.getCmp('cb1').disable();
                Ext.getCmp('cb2').disable();        
            }            
        }
    }, {
        xtype: 'checkboxfield',
        id: 'cb1',
        boxLabel: 'Sometimes',
        checked: true,
        inputValue: 'sometimes',
        disabled: true
    }, {
        xtype: 'checkboxfield',
        id: 'cb2',
        boxLabel: 'Always',
        checked: true,
        inputValue: 'always',
        disabled: true
    }]
}],

我建议使用handler 配置（如上）并且在change 事件上没有监听器。

如果你添加一个change 监听器，它将覆盖ExtJS 内部使用的默认 change 处理程序，以取消选择同名组中的其他单选字段。例如。在“离线”收音机上使用change 监听器，当您选择它时，“全部”将保持选中状态。

换句话说......只要复制上面的例子，一切都会好起来的。

【讨论】：

当我为复选框设置checked: true 和disabled: true 并提交表单时，服务器没有收到on 的复选框参数值。后参数中省略了它。如何在复选框中同时使用禁用和选中值并将其作为提交时的参数？

【解决方案2】：

您可以执行以下操作，为复选框设置 ID，以便在此示例中查找它们：

 if (value == 'offline') {
            var cb1 = Ext.getCmp('cbox1');//look up by given checkbox ids
            var cb2 = Ext.getCmp('cbox2');//look up by given checkbox ids

cb1.enable();
cb2.enable(); 

online 
  }
else {
        var cb1 = Ext.getCmp('cbox1');//look up by given checkbox ids
            var cb2 = Ext.getCmp('cbox2');//look up by given checkbox ids

cb1.disable();
cb2.disable(); 
}

【讨论】：

哈哈，我想我做错了什么。我的单选按钮被禁用，我的复选框默认启用:)

【解决方案3】：

在 ExtJS 中启用/禁用复选框的标准方法是在创建组件时设置配置参数 disable: true 或 disable: false。

但是对于 ExtJS 4.2 - 它有一些不便。禁用或设置复选框为只读使组件看起来非常透明。在经典框架设计和其他一些框架设计中，如果禁用或设置为只读，您甚至不会在框中看到勾号。好像是空的一样。

我们找到的最佳解决方案是为该类型的所有 ExtJS 元素创建一个项目全局 css 类。它在标准框架主题图像中转换为更好的刻度并增加了一些不透明度：

.x-form-readonly .x-form-checkbox {
  background-image: url(/extjs/resources/ext-theme-classic/images/form/checkbox.gif);
  opacity: 0.4;
}

【讨论】：