Creating checkboxgroup from extjs store - extjs

Question

I want to create checkbox group from store populated from an array.
Here is my store.
var checklistStore = new Ext.data.Store({
data: arraySubT,
fields: ['id', 'boxLabel']
});
and currently my checkbox group in only getting displayed from an array and not store.
xtype: 'checkboxgroup',
fieldLabel: 'Checklist',
columns: 1,
vertical: true,
listeners: {
change: function(field, newValue, oldValue, eOpts){
}
},
items: checkboxconfigs
However I want to make it displayed from store.How can I achieve this?

Answer 1

[EDIT]
For your and my convenience, I made a general component which you can use. It may need some tuning regarding the store events that it reacts to. Find it in this fiddle.
[/EDIT]
You have to do it manually:
renderCheckboxes:function() {
checkboxgroup.removeAll();
checkboxgroup.add(
checklistStore.getRange().map(function(storeItem) {
return {
// map the storeItem to a valid checkbox config
}
})
);
}
and repeat that over and over and over again when the store data changes. That is, you have to attach to the store events:
checklistStore.on({
load:renderCheckboxes,
update:renderCheckboxes,
datachanged:renderCheckboxes,
filterchange:renderCheckboxes,
...
})
Maybe you will overlook some events you have to attach to, but sooner or later you will have all edge cases covered.

Answer 2

Here is working fiddle for you.
Just loop through store data with Ext.data.Store.each() method and setup your checkbox group items.
var _checboxGroupUpdated = function() {
// Use whatever selector you want
var myCheckboxGroup = Ext.ComponentQuery.query('panel checkboxgroup')[0];
myCheckboxGroup.removeAll();
myStore.each(function(record) {
myCheckboxGroup.add({
boxLabel: record.get('fieldLabel'),
inputValue: record.get('value'),
name: 'myGroup'
});
});
}
// Add all listeners you need here
myStore.on({
load: _checboxGroupUpdated,
update: _checboxGroupUpdated,
datachanged: _checboxGroupUpdated
// etc
});