extjs - 在 extjs 中启用/禁用复选框

Question

我想启用或禁用 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();

                }

            }
        }
    }]

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

谢谢你的帮助!

Answer 1

我注意到的几个错误:

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

上面示例中的监听器附加到工具栏，该工具栏没有 change事件。您需要将其连接到 radio 。

实际上，如果您只希望在“离线” radio 填满时启用复选框，那么我建议添加 handler配置到“离线” radio ，具有启用或禁用复选框的功能，具体取决于此 radio 更改为的值。例如，这有效:

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监听器它将覆盖默认 change ExtJS 内部使用的处理程序来取消选择同名组中的其他 radio 字段。例如。与 change “离线” radio 上的听众，当您选择它时，“全部”将保持选中状态。

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