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

Question

我试图动态填补Ext.form.CheckboxGroup与Ext.form.Checkbox从JSP页面拉到一个JSON对象派生秒.我的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.Checkboxs,或者是否有其他方法可以实现相同的结果.

我不是要设置复选框的值,但是在提交表单时我需要能够引用它们.

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

要创建复选框组的代码段 -

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