Extjs Generating components using JsonStore

I need to generate checkbox group based on data from DB, so I fetch this data into JsonStore like that:

var itemsInGroup = [];

var valuesStore = new Ext.data.JsonStore({
    url: '../../data.json',
    root : 'values',
    fields: ['id',  'name'],
    autoLoad: true,
    listeners: {
        load: function(t, records, options) {
            for (var i = 0; i < records.length; i++) {
                itemsInGroup.push({
                    name: records[i].name,
                    inputValue: records[i].name
                });
            }
        }
    }

});
valuesStore.load();

after that I use th开发者_运维百科ose items (itemsInGroup) in checkboxgroup nested in panel on page:

...
                {
                    id: 'cbGroupId',
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Directions',
                    items: itemsInGroup
                },  ...

but this code causes an error. What do I do wrong?

I suppose you have next usage:

var itemsInGroup = [];

var valuesStore = new Ext.data.JsonStore(/*...*/);
valuesStore.load(); 
for(var item in itemsInGroup)
{
    // do something with item
}

Request is executed asynchronously and (as response need some time to be fetched) "load"-listener will be called after processing itemsInGroup collection.

You should wrap usage of itemsInGroup into some method and call this method from load-listener.

var valuesStore = new Ext.data.JsonStore({
    listeners: {
        load: function(t, records, options) {
            var itemsInGroup = [];
            for (var i = 0; i < records.length; i++) {
                itemsInGroup.push({
                    name: records[i].name,
                    inputValue: records[i].name
                });
            }
            processItems(itemsInGroup);
        }
    }
});
valuesStore.load();

function processItems(items){
   for(var item in items){/*...*/}
}

try that

itemsInGroup.push({
    xtype: 'checkbox',
    name: records[i].name,
    inputValue: records[i].name
});

itemsIngroup.push(new Ext.form.CheckBox({
   xtype: 'checkbox',
    name: records[i].name,
    inputValue: records[i].name,
    checked :  records[i].checked

}));

You might need to provide a new instance of the checkbox and not just the config object. This will ensure that the constructor will initialize the object correctly.

Also, you can use the 'checked' property to initialize a value right away. I believe it accepts boolean true/false values.

Use defaultType : 'checkbox' :

            {
                id: 'cbGroupId',
                xtype: 'checkboxgroup',
                fieldLabel: 'Directions',
                defaultType: 'checkbox',
                items: itemsInGroup
            }

And boxLabel for checkbox item:

             itemsInGroup.push({
                name: records[i].name,
                inputValue: records[i].name,
                boxLabel : records[i].name
            });