使用extjs4自定义组件重用

我在javascript文件中创建了一个自定义网格。我想用它作为一个xtype在不同的面板上，在不同的js文件。如果我在一个面板上使用它，它工作得很好；但是当我同时在不同的面板上使用时，我在chrome开发者工具控制台中得到一个错误，上面写着：

Uncaught TypeError: Cannot read property 'isComponent' of undefined 

我的网格定义如下：

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);
}

}))

为了在面板上包括网格，我使用以下代码

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',
        }]
    }
   }

在不同的论坛讨论中，我尝试了许多其他的建议。。但我的问题仍然存在。

---

有人能指出我哪里出了问题吗？

不要在配置中分配创建的对象！使用

initComponent

进行此操作

这条线

plugins : [ Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit : 1
}) ],

应作为

this.plugins = [ Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit : 1
}) ];

在调用

callParent

之前的

initComponent

正文中的任何位置

编辑：

仍然允许覆盖吗

if(!this.plugins) {
    this.plugins = [ Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit : 1
    }) ];
}

编辑

---

避免使用静态

id

属性！框架为您处理该部分。将头绕在

Ext.ComponentQuery

周围。它将帮助您找到所需的任何组件。

感谢您指出插件部分。其实我并不真的需要它。。。我忘了删除代码。我现在就把它拆了。我已经在initcomponent中的Ext.apply中添加了包含网格的代码。我甚至尝试在一个组件中调用一个方法，该组件返回一个网格实例。但这两项似乎都没有帮助。@vrush您需要编辑您的帖子以反映这些更改；）@vrush我只能猜测（见我的编辑）；

id

属性可能是您的问题。重复的

id

将导致此类问题。