Button 将不同的视图加载到视口中
我使用的是主视口。我用北面板做按钮。当我点击一个按钮时，我想在中心区域加载一个面板。我在architect allready中提出了一些观点 主视口Button 将不同的视图加载到视口中,button,extjs,view,viewport,Button,Extjs,View,Viewport,我使用的是主视口。我用北面板做按钮。当我点击一个按钮时，我想在中心区域加载一个面板。我在architect allready中提出了一些观点 主视口 Ext.define('MyApp.view.MyViewport', { extend: 'Ext.container.Viewport', layout: { type: 'border' }, initComponent: function() { var me = this; Ext.applyIf(me, {
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);
}
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);
}
var center = viewport.down('[region=center]');
var view = Ext.create('MyView');
center.add(view);
var viewport = Ext.ComponentQuery.query('viewport')[0];
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);
}
var center = viewport.down('[region=center]');
var view = Ext.create('MyView');
center.add(view);
var viewport = Ext.ComponentQuery.query('viewport')[0];
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);
}
var center = viewport.down('[region=center]');
var view = Ext.create('MyView');
center.add(view);
这就是我问题的答案！谢谢这是我问题的答案！非常感谢。