javascript - 如何使用基于从服务器返回的 JSON 对象生成的复选框来填充 Ext.form.CheckboxGroup

Question

我正在尝试使用从 jsp 页面中提取的 JSON 对象派生的 Ext.form.Checkbox 动态填充 Ext.form.CheckboxGroup。我的 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 对象，但我不知道如何遍历这些 Records 来创建任何 >Ext.form.Checkbox，或者是否有其他方法可以达到相同的结果。

我没有尝试设置复选框的值，但我需要能够在提交表单时引用它们。

Answer 1

假设商店已加载(因为您有 autoLoad:true)，您需要

1. 遍历记录以创建一个复选框配置数组
2. 创建复选框组对象(使用上面#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
    });
});

创建复选框组的片段-

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 需要是一个 int)

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' ]
}),