将复选框组动态添加到formpanel

时间:2011-03-31 13:21:46

标签: extjs checkbox

我正在构建一个checkboxgroup,其中包含从商店获取的商品,这些商品会在Ext.OnReady函数中加载。我试图将此复选框组添加到formpanel并在add()调用中得到此错误。 'events'为null或不是对象。

这是我正在尝试的代码..

Ext.onReady(function () {
{
    store.each(function (record) {
        var itemID = record.get('itemID')
        var itemDesc = record.get('itemDesc');
        jsonDataArray.push([itemID,itemDesc]);
    });

    myCheckboxGroup = new Ext.form.CheckboxGroup({
        id: 'chk1',
        xtype: 'checkboxgroup',
        width: 520,
        border: true,
        items: jsonDataArray
    });

    myForm.add(myCheckboxGroup);
    myForm.doLayout();
}

var myForm = new Ext.form.FormPanel({
     id: 'myForm',
            region: 'center',
            border: true,
            autoHeight: true,
            items: myCheckboxGroup

});

2 个答案:

答案 0 :(得分:1)

使用xtype包含布局管理器创建的所有内容,确保为组提供一些要呈现的复选框,并为表单定义布局类型。您还需要将此表单放在其他内容(如窗口)或将其呈现给页面主体。

var myForm = new Ext.form.FormPanel(
{
    id:     'myForm',
    region: 'center',
    layout: 'form',
    border: true,
    autoHeight: true,
    items: [{
        id: 'chk1',
        xtype: 'checkboxgroup',
        width: 520,
        border: true,
        items: [
            {boxLabel: 'Item 1', name: 'cb-1'},
            {boxLabel: 'Item 2', name: 'cb-2', checked: true}, // checked
            {boxLabel: 'Item 3', name: 'cb-3'},
        ]
    }]
});

现在只需用您的JSON版本代替'items'代码。在尝试此操作之前,请确保已从Ajax调用返回并将响应转换为JSON。

有关详细信息,请参阅有关此主题的论坛主题:ExtJs Forum Thread

答案 1 :(得分:0)

new Ext.form.FormPanel({
    title: 'Test Form',
    labelWidth: 120,
    width: 350,
    padding: 10,
    tbar: [{
        text: 'Add CheckboxGroup',
        handler: function () {
            formPanel.add({
                xtype: 'checkboxgroup',
                fieldLabel: 'My CheckboxGroup',
                columns: 1,
                items: items
            });
            formPanel.doLayout();
            this.disable();
        }
    }],
    items: comboBox,
    renderTo: 'output'
});

在这里演示http://ext4all.com/post/extjs-3-add-a-checkboxgroup-dynamically-to-a-form