Question

I am using a main viewport. I use the north panel for buttons. When i click on a button i want to load a panel in the center region. I made some views in architect allready.

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

when i click on the button “magazijn” for example i want to load this view into the center region:

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

How can i do this?

Answer 1

1. Make the center region a container with a card (or fit or tab) layout

2. Call the add method on the center region, adding your component

To get a reference to viewport:

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

To get a reference to center region:

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

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

center.add(view);