Question

我想在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();

提前致谢！

Answer 1

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

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

尝试以上一次。希望这可以帮到你。

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

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

2 个答案: