Extjs Ext JS-将小部件添加到容器项

我是ExtJS的新手，我很难通过代码将“Ext.grid.panel”对象添加到容器项中。我将试图澄清这一点：

我使用的是Ext的MVC架构，所以这是我的主视图，它包含两项：位于其北面位置的菜单栏和位于其中间位置的空白面板

Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires:[
    'Ext.tab.Panel',
    'Ext.layout.container.Border',
    'MyApp.view.Menus'
],

xtype: 'app-main',

layout: {
    type: 'border'
},

items: [{ 
    region: 'north',
    xtype: 'panel',
    padding: '5 5 0 5',
    title: 'MyApp',
    items: {
        xtype: 'menus'
    }
}, { 
    region: 'center',
    xtype: 'centerPanel',
    padding: 5,
}]});

我的菜单工作得很好，所以当我点击一个给定的按钮时，我需要在中间的面板中加载一个网格。这是我需要加载的网格视图：

Ext.define('MyApp.view.empresa.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.empresasList',
title: 'Empresas',

initComponent: function() {
    console.log('grid created');

    this.columns = [
        {header: 'ID', dataIndex: 'id', flex: 1},
        {header: 'Nome', dataIndex: 'nome', flex: 1}
    ];

    this.callParent(arguments);
}
});

这是我尝试在面板上加载网格的函数：

empresasList: function() {
    console.log('we are inside the function');
    centerPanel.add('empresasList');
    centerPanel.doLayout();
}

这是我尝试过的最后一个选择。我能够在控制台上看到“console.log”输出，但屏幕上什么也没有发生

这是我执行功能的控制器：

Ext.define('MyApp.controller.Menus', {
extend: 'Ext.app.Controller',

views: ['Menus','List@MyApp.view.empresa'],

init: function() {

    this.control ({
        'menuitem[action=empresasList]': {
            click: this.empresasList
        }   
    });
},

empresasList: function() {
    console.log('we are inside the function');      
    centerPanel.add('empresasList');
centerPanel.doLayout();

}
    });

---

你们知道怎么回事吗？

你们错过了两件重要的事情。1） 您如何进入

empresasList

？2）

centerPanel

在哪里定义？嗨，埃文！谢谢你的回答！让我解释一下：1）我是在一个控制器内完成的，当我点击“菜单项”时，它会测试“动作”来自“菜单项”。它很好用。2） “centerPanel”在主视图上定义为第二项。。。你认为我应该用另一个命令来获取它吗？谢谢只是复制了问题=）中心面板中的控制器内容，没有在任何地方定义。是什么让你认为你可以用它作为变量？您需要为主要组件添加一个

refs

（参见文档）。然后您可以使用类似于

this.getMainContainer（）.down（'centerPanel'）.add（…）好的，我试试看。非常感谢：）