Creating CheckBox for JSON Objects - extjs4

Question

I am using extjs4,I need to add check box group based on my JSON Object,
JSON
{"Provider":[{"id":3,"name":"Beta House","npi":0,"taxId":0,
"address":{
"state":{"id":"1","stateName":"Alabama","code":"AL"},
"zipcode":0,"country":"USA","email":"beta#gmail.com"},
"type":"CP","LabProvider":[],"ListOfProvider":[]}]}
ExtJs
Ext.define('providerList', {
extend: 'Ext.data.Model',
fields: ['id','name']
});
var provider = Ext.create('Ext.data.Store', {
model: 'providerList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/clinicalProvider/getAll',
reader: {
type: 'json',
root: 'Provider'
}
}
});
Panel
var checkboxconfigs = [];
provider.each(function(record) {
checkboxconfigs.push(
{
boxLabel: 'record.id',
name: 'record.name'
})
});
var checkboxes = new Ext.form.CheckboxGroup({
fieldLabel:'Providers',
columns:2,
items:checkboxconfigs
});
var patientProvider = new Ext.FormPanel({
renderTo: "patientProvider",
frame: true,
title: 'Association',
bodyStyle: 'padding:5px',
width: 500,
items: [{
checkboxes
}],
});
There is no check box in the form.How to populate checkbox from JSON store

Answer 1

You can define the items array before you use it as children of checkboxes. Each element of items array is created base on each record of the store.
var items = [];
provider.each(function(record) { items.push({boxLabel: 'up-to-you', name: 'up-to-you'}) }, );
var checkboxes = new Ext.form.CheckboxGroup({
fieldLabel:'Providers',
columns:2,
items:items
});
Here you can determine the boxLabel and name for each checkbox (the attributes of record may be used as prefix, suffix...)

Answer 2

A couple of tips:
in the definition of panel items remove {} around checkboxes, like this:
items: [ checkboxes ]
second, make sure that the store is available when you are populating checkboxes.
I have a similar situation in my app where store is available after panel is rendered. Panel is dynamically populated with list of checkboxes like this:
panel.add(new Ext.form.CheckboxGroup({
columns: 1,
vertical: true,
items: checkItems
}));
panel.doLayout();
EDIT: another tip:
remove qutoes '' from this code:
{
boxLabel: 'record.id',
name: 'record.name'
}
or you will end up with all labels 'record.id'