Adding a checkboxgroup dynamically to a formpanel

开发者_JAVA技巧

I am building a checkboxgroup with the items got from a store which gets loaded in the Ext.OnReady function. I am trying to add this checkbox group to a formpanel and get this error in the add() call. 'events' is null or not an object.

Here is the code I am trying with..

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

});

---

Use the xtype to have everything created by the layout manager, make sure you are giving your groups some checkboxes to render, and define a layout type for your form. You are also going to need to put this form inside something else (like a window) or render it to the page body.

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'},
        ]
    }]
});

Now just replace that 'items' code with your JSON version of the same. Make sure you have returned from your Ajax call and converted your response into JSON before you attempt this.

See the forum thread on this topic for more information: ExtJs Forum Thread

---

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

Demo here http://ext4all.com/post/extjs-3-add-a-checkboxgroup-dynamically-to-a-form