将不同视图加载到视口中

Question

我正在使用主视口。我使用北面板按钮。当我点击一个按钮时，我想在中心区域加载一个面板。我已经在架构师中提出了一些意见。

mainviewport

Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

layout: {
    type: 'border'
},

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'container',
                height: 65,
                region: 'north',
                items: [
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'Home'
                    },
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'Verkoop'
                    },
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'Verhuur'
                    },
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'Magazijn'
                    },
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'TD'
                    },
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'Planning'
                    },
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'Facturen'
                    },
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'Klachten'
                    },
                    {
                        xtype: 'button',
                        height: 50,
                        maxHeight: 50,
                        maxWidth: 50,
                        minHeight: 50,
                        minWidth: 50,
                        style: 'margin: 5px;',
                        width: 50,
                        text: 'OPM'
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}

当我点击“magazijn”按钮时，我想将此视图加载到中心区域：

Ext.define('MyApp.view.Magazijn', {
extend: 'Ext.panel.Panel',

layout: {
    type: 'border'
},
title: 'Magazijn',

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'panel',
                layout: {
                    type: 'border'
                },
                title: 'Pakbonnen',
                region: 'center',
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        region: 'center',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'button',
                                text: 'Beschadiging melden'
                            },
                            {
                                xtype: 'button',
                                text: 'Vermissing melden'
                            }
                        ]
                    },
                    {
                        xtype: 'gridpanel',
                        height: 150,
                        title: 'Uitgaande pakbonnen',
                        store: 'MyJsonStore',
                        region: 'north',
                        dock: 'top',
                        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'
                            }
                        ],
                        viewConfig: {

                        },
                        dockedItems: [
                            {
                                xtype: 'pagingtoolbar',
                                width: 360,
                                displayInfo: true,
                                store: 'MyJsonStore',
                                dock: 'bottom'
                            }
                        ]
                    }
                ],
                items: [
                    {
                        xtype: 'gridpanel',
                        title: 'Retour pakbonnen',
                        store: 'MyJsonStore',
                        region: 'center',
                        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'
                            }
                        ],
                        viewConfig: {

                        },
                        dockedItems: [
                            {
                                xtype: 'pagingtoolbar',
                                width: 360,
                                displayInfo: true,
                                store: 'MyJsonStore',
                                dock: 'bottom'
                            }
                        ]
                    }
                ]
            }
        ],
        dockedItems: [
            {
                xtype: 'toolbar',
                width: 150,
                region: 'west',
                dock: 'top',
                items: [
                    {
                        xtype: 'button',
                        text: 'Product zoeken'
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}

我该怎么做？

Answer 1

1. 使中心区域成为具有卡片（或合身或标签）布局的容器

2. 在中心区域调用add方法，添加组件

获取对视口的引用：

var viewport = Ext.ComponentQuery.query('viewport')[0];

获取对中心区域的引用：

var center = viewport.down('[region=center]');

var view = Ext.create('MyView');

center.add(view);