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

Question

我尝试了解extjs MVC的基础知识。

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

我需要做什么功能？

这是我的主要模特

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



    }
});

这是我的ProductenType

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.ProductenType加载到ID为'contenBlock'的面板中。

Answer 1

我会使用视口作为我的主要容器

http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport

带有边框布局 http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.layout.container.Border

然后使用添加 http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-add

和删除方法http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-remove

用于视口中的组件操作

专业提示：避免不必要的嵌套组件，在每种情况下都可以使用更轻的组件。例如，与面板相比，DOM中的容器更轻，因此如果您只需要一个容器，请不要使用面板（不是说这种情况）。

我也推荐使用Extjs in Action，这本书很棒，可以帮助你真正理解这个框架。