PDA

View Full Version : How to use a custom component



Pat Emi
15 Nov 2012, 11:36 PM
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.


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...


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.

mitchellsimoens
19 Nov 2012, 9:07 AM
Ext.create('GridForm',{
height:100,
width:100
})

Your class name is MyGridForm so it needs to be Ext.create('MyGridForm', {

-----


Ext.create('Ext.container.Container',{
height:500,
width:'100%',
items:[
{}
xtype:'gridform'
]
})

That's just not valid JavaScript. It needs to be:


Ext.create('Ext.container.Container', {
height:500,
width:'100%',
items:[
{
xtype: 'gridform'
}
]
})

And you probably need to give the Container a layout.