Question

我正在尝试使用从jsp页面提取的JSON对象派生的Ext.form.CheckboxGroup来动态填充Ext.form.Checkbox。我的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个，或者如果还有其他一些方法可以达到相同的效果。

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

Answer 1

假设存储已加载（因为你有autoLoad：true），你需要

遍历记录以创建复选框配置数组
创建checkboxgroup对象（使用上面＃1中创建的数组作为项目配置）
将此复选框组添加到您的表单（或任何容器）并调用此容器的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' ]
}),

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

1 个答案: