Question

我需要根据来自DB的数据生成复选框组，所以我将这些数据提取到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();

之后我在嵌套在页面面板上的checkboxgroup中使用那些项目（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
}

请求是异步执行的（因为响应需要一些时间来获取）“load”-listener将在处理itemsInGroup集合后被调用。

您应该将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({
    xtype: 'checkbox',
    name: records[i].name,
    inputValue: records[i].name
});

Answer 3

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

}));

您可能需要提供复选框的新实例，而不仅仅是配置对象。这将确保构造函数将正确初始化对象。

此外，您可以使用'checked'属性立即初始化值。我相信它接受布尔值true / false值。

Answer 4

使用 defaultType：'复选框'：

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

Extjs使用JsonStore生成组件

4 个答案: