1

我正在使用主视口。我使用北面板作为按钮。当我单击一个按钮时，我想在中心区域加载一个面板。我已经在建筑师中提出了一些看法。

主视口

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

我怎样才能做到这一点？

4

1 回答 1

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);
于 2012-06-20T13:19:01.883 回答