在extjs中启用/禁用复选框

我想在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();

                }

            }
        }
    }]

如何启用这些复选框？当用户选择脱机选项时，应启用这些选项，当用户选择其他选项时，应禁用这些选项

---

谢谢你的帮助

在本例中，您需要为复选框设置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(); 
}

---

我注意到了几个错误：

复选框组件不能通过其

id

直接引用，但可以使用Ext.getCmp（'id'）调用它们

上面示例中的侦听器连接到工具栏，该工具栏没有

change

事件。你需要把它连接到收音机上

实际上，如果您只希望在“脱机”收音机被填充时启用复选框，那么我建议在“脱机”收音机中添加一个

处理程序

配置，并提供一个功能，根据此收音机的更改值启用或禁用复选框。例如，这项工作：

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

config（如上所述），不要在

change

事件上设置侦听器

如果添加

change

侦听器，它将覆盖ExtJS内部使用的默认

change

处理程序，以取消选择相同名称组中的其他无线电字段。例如，使用“脱机”收音机上的

change

侦听器，当您选择它时，“all”将保持选中状态

---

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

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

禁用：true

或

禁用：false

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

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

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

---

哈哈，我想我做错了什么。我的单选按钮被禁用，默认情况下我的复选框被启用：）当我为复选框设置

选中：true

和

禁用：true

并提交表单时，服务器不会收到复选框参数值为

on

。post参数中省略了它。如何对复选框使用禁用值和选中值，并在提交时将其作为参数？