Как заполнить Ext.form.CheckboxGroup флажками, созданными на основе объекта JSON, возвращенного с сервера

Question

Я пытаюсь динамически заполнить Ext.form.CheckboxGroup Ext.form.Checkbox s, полученными из объекта JSON, извлеченного из страницы jsp. Мой объект JSON выглядит так:

{
    "sensors": [ 
        { "id": 200, "name": "name - B - A" }, 
        { "id": 201, "name": "name - B - B" }, 
        { "id": 202, "name": "name - C - A" }, 
        { "id": 203, "name": "name - C - B" } 
    ]
}

Я могу загрузить эти объекты в Ext.data.JsonStore с помощью следующего кода:

new Ext.data.JsonStore({
    id: 'sensorStore',
    autoLoad: true,
    method: 'GET',
    baseParams: {
        jobType: 'sensor'
    },
    url: 'getstatus.jsp',
    root: 'sensors',
    sortInfo: { field: 'id', direction: 'ASC' },
    fields: [ 'id', 'name' ]
}),

Насколько я понимаю, это даст мне доступ к набору Ext.data.Record объектов, но я не могу понять, как выполнить итерацию по этим записям для создания каких-либо Ext.form.Checkbox s, или если есть какой-то другой способ достижения того же результата.

Я не пытаюсь установить значения флажков, хотя мне нужно будет иметь возможность ссылаться на них при отправке формы.

Answer 1

Предполагается, что хранилище загружено (поскольку у вас есть autoLoad: true), вам нужно

1. перебираем записи для создания массива конфигов флажков
2. создать объект checkboxgroup (используя массив, созданный в # 1 выше в качестве конфигурации элементов)
3. добавьте эту группу флажков в вашу форму (или любой другой контейнер) и вызовите doLayout () этого контейнера, если он уже обработан

Фрагмент для итерации и создания конфигов флажков-

var checkboxconfigs = []; //array of about to be checkboxes.   
mystore.getRange().each(function(record){
    checkboxconfigs.push({ //pushing into array
        id:record.data.id,
        boxLabel:record.data.name,
        //any other checkbox properties, layout related or whatever
    });
});

Фрагмент для создания checkboxgroup-

var myCheckboxgroup = new Ext.form.CheckboxGroup({
    id:'myGroup',
    fieldLabel: 'Checkboxes in two columns',
    columns:2,
    items:checkboxconfigs //created in previous snippet.
    //any other checkbox group configuration
});

Добавить в свой контейнер и перерисовать его-

mycontainer.add(myCheckboxgroup).doLayout();

РЕДАКТИРОВАТЬ - Ваша конфигурация JsonStore не соответствует возвращенным данным. (id должен быть целым)

new Ext.data.JsonStore({
    id: 'sensorStore',
    autoLoad: true,
    method: 'GET',
    baseParams: {
        jobType: 'sensor'
    },
    url: 'getstatus.jsp',
    root: 'sensors',
    sortInfo: { field: 'id', direction: 'ASC' },
    fields: [ {name:'id', type:int}, 'name' ]
}),