使用 extjs4 重用自定义组件

我在 JavaScript 文件中创建了一个自定义网格。我想将它用作单独 js 文件中不同面板的 xtype。如果我在单个面板上使用它，它工作得很好；但是当我尝试同时在不同的面板上使用它时，我在 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
}) ];

任何地方在initComponent身体，但之前callParent叫做

Edit:

仍然允许覆盖做

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

Edit

避免使用静态id特性！框架会为您处理该部分。把你的头围起来Ext.ComponentQuery反而。它将帮助您找到您正在寻找的任何组件。