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 に答える