Extjs Генерация компонентов с использованием JsonStore

Question

Мне нужно создать группу флажков на основе данных из БД, поэтому я получаю эти данные в JsonStore следующим образом:

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

после этого я использую эти элементы (itemsInGroup) в группе флажков, вложенной в панель на странице:

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

но этот код вызывает ошибку. Что я делаю не так?

Answer 1

Я полагаю, у вас есть следующее использование:

var itemsInGroup = [];

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

Запрос выполняется асинхронно и (так как ответу требуется некоторое время для извлечения), после обработки itemsInGroup collection будет вызван "load" -listener.

Вы должны обернуть использование itemsInGroup в некоторый метод и вызвать этот метод из 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){/*...*/}
}

Answer 2

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

}));

Возможно, вам потребуется предоставить новый экземпляр флажка, а не только объект конфигурации.Это гарантирует, что конструктор будет правильно инициализировать объект.

Кроме того, вы можете использовать свойство selected для немедленной инициализации значения.Я считаю, что он принимает логические значения true / false.

Answer 3

Использовать defaultType: 'checkbox' :

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

И boxLabel для элемента флажка:

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

Answer 4

попробуйте

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