custom component reuse with extjs4 - extjs

Question

I have created a custom grid in a javascript file. I want to use it as a xtype on to different panels in seperate js files. If I use it on a single panel, it works fine; but when I use try it use it on different panels at the same time, I get a error in the chrome developer tool console saying:
Uncaught TypeError: Cannot read property 'isComponent' of undefined
My grid definition is as follows:
Ext.define('DataBox.view.FootNotes', {
extend : 'Ext.grid.Panel',
alias : 'widget.footNotes',
initComponent : function() {
this.columns = [ {
header : 'SL',
field : {
xtype : 'checkbox',
checked : 'true'
}
}, {
header : 'Symbol',
}, {
header : 'Notes',
}, ];
this.callParent(arguments);
}
});
and to include the grid on the panels i use following code
initComponent : function() {
/* this.footNotesInfoGrid = Ext.create('DataBox.view.FootNotes', {
colspan: 2,
border: false,
frame: 'false'
}); even tried this */
Ext.apply(this,{
items : [{
xtype : 'footNotes',
columnWidth : .50,
id : 'infoFootNotesGrid',
}]
}
}
I tried many other ways suggested on different forum discussions.. but my problem stil persists.
Can somebody point out where I am going wrong?

Answer 1

Don't assign created objects within a configuration! Use initComponent for that!
this line
plugins : [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ],
should be placed as
this.plugins = [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ];
anywhere in the initComponent body, but before callParent is called
Edit:
to still allow override do
if(!this.plugins) {
this.plugins = [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ];
}
Edit
Avoid using static id properties! The framework handle that part for you. Wrap your head around Ext.ComponentQuery instead. It will help you to find any Component you are looking for.