Dynamic Checkgroup

[TopKatz]

Im trying to build a dynamic checkgroup of sorts. I know that there is no add method for the checkgroup, so I'm trying to do it on the fly, but I think my timing is off. Maybe someone has an idea for me? Here is my code:

Ext.namespace("Ihc.app");

Ihc.app.JSONCheckGroup = Ext.extend(Ext.form.CheckboxGroup, {
    fieldLabel:'Check Group',
    allowBlank:false,
    columns:2,
    checks:[{boxLabel: 'Temp', name: 'temp'}],
    params:{routine:'getData',param:1,param2:2},
    url:'data/adminRequest.php',
    root:'data',
    autoBuild:false,
    autoHeight:true,
    map:{label:'name',name:'id'},
    getData:function(){

         Ext.Ajax.request({
             url:this.url,
             scope:this,
             waitMsg:'',
             params:this.params,
             callback: function(options, success, response) {
                 if (Ext.decode(response.responseText).success == false) {
                     var er = Ext.decode(response.responseText).error;

                     Ihc.app.ShowSystemError(er);
                 } else {

                     var data = Ext.decode(response.responseText);

                    this.checks = [];
                     console.log(this.items)
                     for(i=0; i < data[this.root].length;i++){

                        var o ={
                            boxLabel:data[this.root][i][this.map.label],
                            name:data[this.root][i][this.map.name]
                         }
                        this.checks.push(o);

                     }

                 }
             }
         });
    },
    initComponent:function() {

        this.config = {
            items:this.checks
        };

        Ext.apply(this, Ext.apply(this.initialConfig, this.config));

		Ihc.app.JSONCheckGroup.superclass.initComponent.apply(this, arguments);
	} // eo function initComponent

	,onRender:function() {

		Ihc.app.JSONCheckGroup.superclass.onRender.apply(this, arguments);

	}, // eo function onRender
    listeners:{
        'beforerender':function(){

            if(this.autoBuild){
                this.getData();

            }
        }
    }
});

Ext.reg('jsoncheckgroup', Ihc.app.JSONCheckGroup);

My object load data, but I can not get the items to use my new items.

[TopKatz]

Ext.namespace("Ihc.app");

Ihc.app.JSONCheckGroup = Ext.extend(Ext.form.CheckboxGroup, {
    fieldLabel:'Check Group',
    allowBlank:false,
    columns:2,
    checks:[{boxLabel: 'Temp', name: 'temp'},{boxLabel: 'Temp2', name: 'temp2'}],
    params:{routine:'getData',param:1,param2:2},
    url:'data/adminRequest.php',
    root:'data',
    autoBuild:false,
    autoHeight:true,
    map:{label:'name',name:'id'},
    getData:function(){

         Ext.Ajax.request({
             url:this.url,
             scope:this,
             waitMsg:'',
             params:this.params,
             callback: function(options, success, response) {
                 if (Ext.decode(response.responseText).success == false) {
                     var er = Ext.decode(response.responseText).error;

                     Ihc.app.ShowSystemError(er);
                 } else {

                     var data = Ext.decode(response.responseText);


                     this.panel.items.items[0].removeAll();
                     this.panel.items.items[1].removeAll();
                     for(i=0; i < data[this.root].length;i++){

                        var o ={
                            boxLabel:data[this.root][i][this.map.label],
                            name:data[this.root][i][this.map.name],
                            xtype:'checkbox'
                         }

                        var place = 1;
                        if(Ihc.app.isEven(i)){
                            place = 0;
                         }
                         this.panel.items.items[place].add(o)


                     }
                    this.panel.doLayout();
                 }
             }
         });
    },
    initComponent:function() {

        this.config = {
            items:this.checks
        };

        Ext.apply(this, Ext.apply(this.initialConfig, this.config));

		Ihc.app.JSONCheckGroup.superclass.initComponent.apply(this, arguments);
	} // eo function initComponent

	,onRender:function() {

		Ihc.app.JSONCheckGroup.superclass.onRender.apply(this, arguments);

	}, // eo function onRender
    listeners:{
        'beforerender':function(){

            if(this.autoBuild){
                this.getData();

            }
        }
    }
});

Ext.reg('jsoncheckgroup', Ihc.app.JSONCheckGroup);

[TopKatz]

hmm -looks good but does not work quite right. It dorks the form validation and I get a TypeError: this.el.dom is undefined when I close the window that the parent form is in. Any thoughts?