I'm looking for solution how to check items in the Ext.form.CheckboxGroup ponent which is already rendered and contains set of items.

Code of the ponent is:

var oCheckboxGroup = new Ext.form.CheckboxGroup({
    columns: 2,
    vertical: true,
    items: [
        {boxLabel: "Value 1", inputValue: 1},
        {boxLabel: "Value 2", inputValue: 2},
        ...
        {boxLabel: "Value N", inputValue: N}
    ]
});

This ponent will be displayed in a modal window by clicking on a button, so I have to recheck items in checkboxgroup depending to record that will be modified.

For example, when I'll show window first time I'll have to pre-check items 1, 2 and 3, at the second time – 2, 4 and 5.

So the real question is: how can I loop through checkbox group items and check/uncheck checkboxes?

Btw, I tried next solution, but nothing:

oCheckboxGroup.items.each(function(oEl) {
    oEl.checked = true;
});

Thanks.

UPD

Answer found. Question will be closed in 2 days when I'll be allowed to accept my own answer, or earlier if someone else answer correctly =))

I'm looking for solution how to check items in the Ext.form.CheckboxGroup ponent which is already rendered and contains set of items.

Code of the ponent is:

var oCheckboxGroup = new Ext.form.CheckboxGroup({
    columns: 2,
    vertical: true,
    items: [
        {boxLabel: "Value 1", inputValue: 1},
        {boxLabel: "Value 2", inputValue: 2},
        ...
        {boxLabel: "Value N", inputValue: N}
    ]
});

This ponent will be displayed in a modal window by clicking on a button, so I have to recheck items in checkboxgroup depending to record that will be modified.

For example, when I'll show window first time I'll have to pre-check items 1, 2 and 3, at the second time – 2, 4 and 5.

So the real question is: how can I loop through checkbox group items and check/uncheck checkboxes?

Btw, I tried next solution, but nothing:

oCheckboxGroup.items.each(function(oEl) {
    oEl.checked = true;
});

Thanks.

UPD

Answer found. Question will be closed in 2 days when I'll be allowed to accept my own answer, or earlier if someone else answer correctly =))

• javascript
• extjs
• checkbox
• extjs4

4 Answers 4

Solution found. Sencha says:

setValue(Object value): Ext.form.CheckboxGroup

Sets the value(s) of all checkboxes in the group. The expected format is an Object of name-value pairs corresponding to the names of the checkboxes in the group. Each pair can have either a single or multiple values:

• A single Boolean or String value will be passed to the setValue method of the checkbox with that name. See the rules in Ext.form.field.Checkbox.setValue for accepted values.
• An Array of String values will be matched against the inputValue of checkboxes in the group with that name; those checkboxes whose inputValue exists in the array will be checked and others will be unchecked.

So I just added name: "cbgroup" property to checkbox configs and then I use construction like

// first time
oCheckboxGroup.setValue({
    cbgroup: [1, 2, 3]
})
// second time
oCheckboxGroup.setValue({
    cbgroup: [2, 4, 5]
})

Thanks all who tried to help me, hope this answer will save somebody's time ;)

For ExtJS 3.x

Use the setValue method on the CheckboxGroup object and specify true/false for the individual items in it:

setValue( Object value ) 

E.g. in your case, to pre-check 1, 2, 3 you will have to call:

cbxGrpObj.setValue([true,true,true]);

To pre-check 4,5 and un-check 1,2,3 you will have to call:

cbxGrpObj.setValue([false,false,false, true,true]);

Hope this helps!

I just stumbled upon this while looking for how to set a checkboxgroup value from a form.setValues call. As it turns out, in ExtJS if you give all of your checkboxes in the group the same name, you can just give setValues an array of values for that name and any matching values will be checked for you.

var oCheckboxGroup = new Ext.form.CheckboxGroup({
    columns: 2,
    vertical: true,
    items: [
        {name: 'cbg1', boxLabel: "Value 1", inputValue: 1},
        {name: 'cbg1', boxLabel: "Value 2", inputValue: 2},
        {name: 'cbg1', boxLabel: "Value N", inputValue: N}
    ]
});
...

form.setValues( { cbg1: [ '1','N' ] } );

I hope this helps anyone else who finds this with the same keywords I did.

Ext.each(`oCheckboxGroup`.items.items, function(item) {
     item.checked = true;
}, this);