Showing posts with label Checkboxgroup. Show all posts
Showing posts with label Checkboxgroup. Show all posts

Sunday, August 11, 2013

ExtJS add checkbox group to a panel on fly

/* Add a panel to parent panel as item */
{
    xtype: 'panel',
    id: "paymentMethod",
    fieldLabel: 'Preferred Payment Method'
}

/* Bind 'load' event on store that loads data as JSON */
var paymentstore = new Ext.data.JsonStore({
    proxy: new Ext.data.HttpProxy({
        url: Ext.SERVER_URL + 'get_data',
        method: 'post'
    }),
    listeners :{
        load:function() {
            var testArray = new Array();
            for(var i=0; i<records.length; i++) {
                testArray.push({

                    id: "some_id_" + records[i].data.id,
                    checked: true, /* or false */
                    name: "payment_method[" + records[i].data.id + "]",
                    boxLabel: records[i].data.name,
                    listeners:{
                        check:function (clickedObject, isChecked){
                            console.log(
clickedObject);
                            console.log(
isChecked);
                            console.log("Check box check status changed.");

                            var group = Ext.getCmp ("payment_group");
                            var length = group.items.getCount ();
                            var isCheck = group.items.items [0]. checked;
                        }
                    }
                });
            }
            var myCheckboxgroup = new Ext.form.CheckboxGroup({
                id:'payment_group',
                fieldLabel: 'Checkboxes',
                boxLabel:'State',

                columns: 1,
                items:testArray //created in previous snippet.
            });
            Ext.getCmp("paymentMethod").add(myCheckboxgroup);

            Ext.getCmp("paymentMethod").doLayout();
        }
    },
    fields: ['id',  'name', "description"],
    totalProperty: 'totalCount',
    root: 'data'
});

/* Load store */
paymentstore.load({
    params: {
        start: 0
    }
});