Extjs 将网格面板加载到内容面板中

我试图理解extjsmvc的基础知识

我用Sencha命令创建了示例应用程序。这是一些基本的东西。我尝试制作一个带有工具栏的面板，其中有一个菜单。当我单击菜单中的某个项目时，我想将网格加载到面板中

我需要什么功能来执行此操作

这是我的主要型号

Ext.define('JustRent.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'JustRent.view.main.MainController',
        'JustRent.view.main.MainModel',
        'JustRent.view.main.ProductenType'
    ],

    xtype: 'app-main',

    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [{
            region: 'center',
            id: 'contentBlock',
            xtype: 'panel',
            layout: 'fit',
            title: 'JustRental',

            dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [{
                            xtype: 'button',
                            text: 'Menu',
                            menu: {

                                xtype: 'menu',
                                items: [{
                                    xtype: 'menuitem',
                                    text: 'verhuur',
                                    menu: { 
                                    xtype: 'menu',
                                items: [{
                                    xtype: 'menuitem',
                                    text: 'Offertes',
                                    menu: {
                                        xtype: 'menu',
                                        items: [{
                                            xtype: 'menuitem',
                                            text: 'Overzicht'
                                        },{
                                            xtype: 'menuitem',
                                            text: 'Nieuwe offerte'
                                        },{
                                            xtype: 'menuitem',
                                            text: 'Openstaande offertes'
                                        },{
                                            xtype: 'menuitem',
                                            text: 'Geannuleerde offertes'
                                        }]
                                    }
                                }, {
                                    xtype: 'menuitem',
                                    text: 'Projecten',
                                    menu: {
                                        xtype: 'menu',
                                        items: [{
                                            xtype: 'menuitem',
                                            text: 'Overzicht'
                                        }]
                                    }
                                }, {
                                    xtype: 'menuitem',
                                    text: 'Producten',
                                    menu: {
                                        xtype: 'menu',
                                        items: [{
                                            xtype: 'menuitem',
                                            text: 'Overzicht'
                                        },{
                                            xtype: 'menuitem',
                                            text: 'Artikelen'
                                        },{
                                            xtype: 'menuitem',
                                            text: 'Groepen'
                                        },{
                                            xtype: 'menuitem',
                                            text: 'Type',
                                    handler: 'onClickButton',
                                        },{
                                            xtype: 'menuitem',
                                            text: 'Soort'
                                        },{
                                            xtype: 'menuitem',
                                            text: 'Merk'
                                        }]
                                    }

                                }, {
                                    xtype: 'menuitem',
                                    text: 'Klanten'
                                }]

                                    }
                                },
                                {
                                    xtype: 'menuitem',
                                    text: 'verkoop'
                                }
                                ]



                            }
                        }]


                }]



        }
    ]
});

当我点击一个项目时，我使用一个基本的处理程序。这位于我的mainController文件中：

Ext.define('JustRent.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    requires: [

    ],

    alias: 'controller.main',

    onClickButton: function () {
        console.log('click works');



    }
});

这是我的产品类型

Ext.define('JustRent.view.main.ProductenType', {

    extend: 'Ext.grid.Panel',
    alias: 'widget.ProductenType',
     requires: [
        // alerts
    ],



            xtype: 'gridpanel',
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'string',
                    text: 'String'
                },
                {
                    xtype: 'numbercolumn',
                    dataIndex: 'number',
                    text: 'Number'
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'date',
                    text: 'Date'
                },
                {
                    xtype: 'booleancolumn',
                    dataIndex: 'bool',
                    text: 'Boolean'
                }
            ]




        });

---

但是现在我的问题是如何将JustRent.view.main.ProductEntType加载到id为“contenBlock”的面板中。

我将使用视口作为主容器

使用边框布局

然后使用添加

和删除方法

用于视口中的组件操纵

专业提示：避免不必要的组件过度嵌套，在每种情况下尽可能使用较轻的组件。e、 与面板相比，DOM中的g容器更轻，因此如果您只需要一个容器，就不要使用面板（并不是说情况就是这样）

---

此外，我还推荐Extjs in Action，这是一本很棒的书，它将帮助您真正理解框架。

谢谢，我将把面板改为容器。越轻越好：）