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个事件。您需要将其附加到收音机。

实际上，如果您只想在填充“离线”广播时启用复选框，那么我建议您在“离线”广播中添加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听众，当您选择它时，“全部”将保持选中状态。

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

Answer 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(); 
}

Answer 3

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

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

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

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

在extjs中启用/禁用复选框

3 个答案: