CODEWITHSUNDEEP
javascriptextjssencha-architectextjs4.2
Anand Singh
Anand Singh

Reputation: 327

How to check all the checkboxes in checkbox group in extjs?

I have a checkbox group with somany checkboxes in it. I want to check all of them once when a button clicked. These checkboxes are created dynamically. 

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);

Thanks in advance!

Upvotes: 2

Views: 13238

Answers (3)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

I would create a button which holds a reference to a checkbox group and then store states to toggle select and de-select on click. Here is a live demo of the code below.

App

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

DynamicCheckboxGroup

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

CheckboxGroupButton

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

Upvotes: 2

mustafa.0x
mustafa.0x

Reputation: 1506

In ExtJS 4.x there is a shortcut for Eldono's solution: 

var checkBoxes = checkboxGroup.getBoxes()

Sencha docs: Ext.form.CheckboxGroupView.getBoxes

Upvotes: 1

Eldono
Eldono

Reputation: 138

you can use "query" method to search childs with "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

Upvotes: 2

Related Questions