Hello all,

Am trying to build a reusable component, but i observered that i cannot reuse it. my fire bug displays j is undefined.

this is my code.
Code:
Ext.define('MyGridForm', {
        extend: 'Ext.container.Container',
        alias: 'widget.gridform',
               height:600,
        width:'100%',
               constructor: function(config){
            Ext.apply(this, {
                                items: [
                {
                    xtype:'form',
                    title: 'panel 1',
                    width:50,
                    height:50,
                    items:[
                        {
                            xtype:'textfield',
                            label:'First Name'
                        }
                    ]
                },
                {
                xtype:'grid',
                width:50,
                height:50,
                columns:[
            {
                header:'SERVICE TYPE'
            },
            {
                header:'DESCRIPTION'
            },
            {
                header:'AMOUNT(N)'
            }
        ]
            },
                                ]
            });
            this.callParent(arguments);
        }

    });
And this is where i want to use it...
Code:
Ext.create('GridForm',{
height:100,
width:100

})

or 
Ext.create('Ext.container.Container',{
height:500,
width:'100%',
items:[
{}
xtype:'gridform'
]
})
From the view of this code is there something am not doing right?
Please any contribution will be appreciated.
Thanks in advance.

Pat.