Question

我是Ext JS的新手，我很难通过代码将“Ext.grid.panel”对象添加到Container项目中。我会试着澄清一下：

我正在使用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();

}
    });

你们有什么问题吗？

Ext JS - 将Widget添加到Container项目

0 个答案: