加载不同的意见纳入视 [英] load different views into viewport
本文介绍了加载不同的意见纳入视的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是主视口。我使用的按钮北方面板。当我点击一个按钮，我想在负荷中心区域的面板。我在建筑师媒体链接做了一些看法。
mainviewport
Ext.define（'MyApp.view.MyViewport'，{
延伸：Ext.container.Viewport'，布局：{
类型：'边境'
}，initComponent：功能（）{
VAR我=这; Ext.applyIf（我，{
项目：
{
的xtype：'容器'，
高度：65，
区域：'北'，
项目：
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文字：家
}，
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文本：Verkoop
}，
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文本：VERHUUR
}，
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文本：Magazijn
}，
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文字：'TD'
}，
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文字：规划
}，
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文本：Facturen
}，
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文本：Klachten
}，
{
的xtype：'按钮'，
高度：50，
了maxHeight：50，
了maxWidth：50，
了minHeight：50，
了minWidth：50，
风格：保证金：5像素;，
宽度：50，
文字：OPM
}
]
}
]
}）; me.callParent（参数）;
}
当我点击按钮magazijn比如我希望加载这个视图进入中心区：
Ext.define（'MyApp.view.Magazijn'，{
延伸：Ext.panel.Panel'，布局：{
类型：'边境'
}，
标题：Magazijn'，initComponent：功能（）{
VAR我=这; Ext.applyIf（我，{
项目：
{
的xtype：'板'，
布局：{
类型：'边境'
}，
标题：Pakbonnen'，
区域：中心，
dockedItems：
{
的xtype：工具栏，
区域：中心，
码头：'顶'，
项目：
{
的xtype：'按钮'，
文本：Beschadiging melden
}，
{
的xtype：'按钮'，
文本：Vermissing melden
}
]
}，
{
的xtype：'GridPanel中'，
身高：150
标题：Uitgaande pakbonnen'，
店：MyJsonStore'，
区域：'北'，
码头：'顶'，
列： [
{
的xtype：'的GridColumn'，
dataIndex：'串'，
文本：字符串'
}，
{
的xtype：'numbercolumn'，
dataIndex：'数'，
文字：数字
}，
{
的xtype：'datecolumn'，
dataIndex：'日期'，
文字：'日期'
}，
{
的xtype：'booleancolumn'，
dataIndex：'布尔'，
文字：布尔
}
]
viewConfig：{ }，
dockedItems：
{
的xtype：'pagingtoolbar'，
宽度：360，
displayInfo：真实，
店：MyJsonStore'，
码头：'底'
}
]
}
]
项目：
{
的xtype：'GridPanel中'，
标题：传译pakbonnen'，
店：MyJsonStore'，
区域：中心，
列： [
{
的xtype：'的GridColumn'，
dataIndex：'串'，
文本：字符串'
}，
{
的xtype：'numbercolumn'，
dataIndex：'数'，
文字：数字
}，
{
的xtype：'datecolumn'，
dataIndex：'日期'，
文字：'日期'
}，
{
的xtype：'booleancolumn'，
dataIndex：'布尔'，
文字：布尔
}
]
viewConfig：{ }，
dockedItems：
{
的xtype：'pagingtoolbar'，
宽度：360，
displayInfo：真实，
店：MyJsonStore'，
码头：'底'
}
]
}
]
}
]
dockedItems：
{
的xtype：工具栏，
宽度：150，
区域：'西'，
码头：'顶'，
项目：
{
的xtype：'按钮'，
文字：产品zoeken
}
]
}
]
}）; me.callParent（参数）;
}
我怎样才能做到这一点？
解决方案
-
使中心区域的容器用卡（或装配或标签）布局
-
在呼叫中心区域add方法，将您的组件
要得到视口中参考：
VAR视= Ext.ComponentQuery.query（'视'）[0];
要到中心区域的引用：
VAR中心= viewport.down（'[区域= CENTER]'）;VAR视图= Ext.create（'MyView的'）;center.add（视图）;
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);
这篇关于加载不同的意见纳入视的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
