如何检查extjs中复选框组中的所有复选框？

Question

我有一个复选框组，其中包含许多复选框。我想在单击按钮时检查所有这些。这些复选框是动态创建的。

var json = result.responseText;
    var temp = JSON.parse(json);

    for(var i=0;i<Object.keys(temp[newValue]).length;i++){           
        menuArray.push({
            xtype: 'checkboxfield',
            boxLabel: (temp[newValue][i]).split("_").join(" "),
            name: temp[newValue][i],
            id:temp[newValue][i],
            inputValue: 'true',
            uncheckedValue: 'false',
            formBind: false
        });
    }

    checkboxGroup = new Ext.form.CheckboxGroup({
        xtype: 'checkboxgroup',
        fieldLabel: '',
        id:'moduleCheckboxGroup',
        columns: 1,
        items: menuArray
    });

    permissionPanel.removeAll();
    permissionPanel.add(checkboxGroup);

提前致谢！

Answer 1

您可以使用“查询”方法通过“isCheckbox”搜索子项。

Ext.create('Ext.form.CheckboxGroup', {
    renderTo: Ext.getBody(),
    id: 'mycheckboxgroup',
    columns: 1,
    items: [{
        xtype: 'checkboxfield',
        boxLabel: 'Test1',
        name: 'test1',
        inputValue: 'true',
        uncheckedValue: 'false',
        formBind: false
    }, {
        xtype: 'checkboxfield',
        boxLabel: 'Test2',
        name: 'test2',
        inputValue: 'true',
        uncheckedValue: 'false',
        formBind: false
    }, {
        xtype: 'checkboxfield',
        boxLabel: 'Test3',
        name: 'test3',
        inputValue: 'true',
        uncheckedValue: 'false',
        formBind: false
    }]
});

Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Check all',
    handler: function () {
        var checkboxes = Ext.getCmp('mycheckboxgroup').query('[isCheckbox]');
        Ext.Array.each(checkboxes, function (checkbox) {
            checkbox.setValue(1);
        });
    }
});

Jsfiddle example

Answer 2

我将创建一个包含对复选框组的引用的按钮，然后存储状态以在单击时切换选择和取消选择。这是下面代码的实时demo。

应用

var group = Ext.create('App.DynamicCheckboxGroup', {
    id: 'mycheckboxgroup',
    count : 9,
    columns : 3,
    width: 180,
    renderTo: Ext.getBody()
});

Ext.create('App.CheckboxGroupButton', {
    checkboxGroup: group,
    renderTo: Ext.getBody()
});

动态复选框组

Ext.define('App.DynamicCheckboxGroup', {
    extend : 'Ext.form.CheckboxGroup',
    config : {
        count : 3
    },
    initComponent : function() {
        var me = this;
        var items = [];
        for (var i = 1; i <= me.count; i++) {
            items.push({
                xtype: 'checkbox',
                boxLabel: 'Test' + i,
                name: 'test' + i,
                inputValue: 'true',
                uncheckedValue: 'false',
                formBind: false
            });
        }
        me.items = items;
        me.callParent(arguments);
    }
});

复选框组按钮

Ext.define('App.CheckboxGroupButton', {
    extend: 'Ext.Button',
    config : {
        checkboxGroup : null,
        states : [{
            text : 'Deselect All',
            value : 1
        }, {
            text: 'Select All',
            value : 0
        }]
    },
    initComponent : function() {
        var me = this;
        me.setText(me.states[1].text);
        me.callParent(arguments);
    },
    handler : function (button, e) {
        var me = this;
        var newState = me.states.reduce(function(result, state) {
            return state.text !== button.getText() ? state : result;
        }, {});
        Ext.Array.each(me.checkboxGroup.getBoxes(), function (checkbox) {
            checkbox.setValue(newState.value);
        });
        button.setText(newState.text);
    }
});

Answer 3

在 ExtJS 4.x 中有一个 Eldono 解决方案的捷径：

var checkBoxes = checkboxGroup.getBoxes()

煎茶文档：Ext.form.CheckboxGroupView.getBoxes