如何在 ExtJS 3.4 中创建动态复选框答案

【问题标题】：How to create dynamic checkbox in ExtJS 3.4如何在 ExtJS 3.4 中创建动态复选框
【发布时间】：2014-10-12 20:40:33
【问题描述】：

我想在ExtJS 弹出窗口window 中创建一个动态复选框列表，从数据库中获取结果，但复选框未显示在弹出窗口window 中。

请帮忙找出错误。

这是我的代码：

var checkboxes = [];
var listStore = new Ext.data.JsonStore({
    url: 'abc.jsp?action=getList',
    baseParams: {
        parent: 123
    },
    idProperty: 'name',
    fields: ['id', 'name'],
    listeners: {
        load: function (records) {
            for (var i = 0; i < records.length; i++) {
                checkboxes.push({
                    inputValue: records[i].data.id,
                    boxLabel: records[i].data.name
                });
            }
        }
    }
});

myCheckboxGroup = new Ext.form.CheckboxGroup({
    id: 'chk1',
    xtype: 'checkboxgroup',
    border: true,
    columns: 1,
    vertical: true,
    items: checkboxes
});

passenger = new Ext.FormPanel({
    bodyPadding: 10,
    width: 300,
    xtype: 'fieldset',
    title: "Systems",
    collapsed: false,
    checkboxToggle: true,
    anchor: '100%',
    defaultType: 'checkbox',
    layout: 'anchor',
    id: 'passengerForm',
    defaults: {
        anchor: '100%',
        hideEmptyLabel: false
    },
    items: myCheckboxGroup,
    buttons: [{
        text: 'Ok',
        handler: function () {
            window.close();
        }
    }, {
        text: 'Cancel',
        handler: function () {
            window.close();
        }
    }]
});

var window = new Ext.Window({
    title: 'Passenger List',
    closable: true,
    id: "passenger-window",
    //modal:true,
    width: 295,
    //autoHeight: true,
    height: 100,
    items: [passenger]
}).show();

listStore.load();
passenger.items.add(myCheckboxGroup);
passenger.doLayout();

提前致谢！

【问题讨论】：

标签： jsp extjs extjs3

【解决方案1】：

我认为您在添加复选框时缺少 Jsonstore 侦听器中的 xtype。

checkboxes.push(
   new Ext.form.Checkbox(
     {
       inputValue: records[i].data.id,
       boxLabel: records[i].data.name
       })
    );

尝试以上方法一次。希望对您有所帮助。

【讨论】：

【解决方案2】：

您的加载功能有问题。它不工作。用这个替换你的加载函数。它有效。

load: function () {
    for (var i = 0; i < listStore.getCount(); i++) {
        var record = listStore.getAt(i);
        checkboxes.push({
            inputValue: record.data.id,
            boxLabel: record.data.name
        });
    }
}

【讨论】：