javascript ExtJS：将项目动态添加到视口区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6063896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS: Dynamically add item to viewport region
提问by FoobarisMaximus
Let's say I have a JS in one file that creates a Viewport:
假设我在一个文件中有一个 JS，它创建了一个Viewport：
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'center'
},
...
]
});
Now let's say I have another JS file that loads subsequently with this component definition:
现在假设我有另一个 JS 文件，它随后使用此组件定义加载：
{
contentEl: 'content',
height: '100%'
}
How do I add that component with contentEl: 'content'to the 'center'region?
如何将该组件添加contentEl: 'content'到该'center'区域？
采纳答案by TheHorse
var viewpoert = Ext.create('Ext.container.Viewport', {
layout: 'border'
});
anoter file;
另一个文件；
var contentEl = Ext.Create('Ext.Something.What.You.Want', {
region: "center"
});
finally:
最后：
viewport.add(contentEl);
回答by pahan
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'center',
id:'centerViewPortId'
}
]
});
//your second javascript file
Ext.onReady(function(){
var contentEl = Ext.create('Ext.Component', {
contentEl: 'content',
renderTo: Ext.getBody()
});
viewPort.getComponent('centerViewPortId').add(contentEl);
});
回答by jeremytavener
This link still came up top of the search results for Google, so I thought I'd add another neat solution:
这个链接仍然出现在谷歌搜索结果的顶部，所以我想我会添加另一个巧妙的解决方案：
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border'
});
//your second javascript file
Ext.onReady(function(){
var contentEl = Ext.create('Ext.Component', {
contentEl: 'content',
region: 'center',
renderTo: Ext.getBody()
});
viewPort.add(contentEl);
});
