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?
Make the center region a container with a card (or fit or tab) layout
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);
来源：https://stackoverflow.com/questions/11120226/load-different-views-into-viewport