Javascript ExtJS：将项目动态添加到视口区域

假设我在一个文件中有一个JS，它创建了一个

视口

：

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [
        {
            region: 'center'
        }, 
        ...
    ]
});

现在，假设我有另一个JS文件，该文件随后会加载此组件定义：

{
    contentEl: 'content',
    height: '100%'
}

如何将带有

contentEl:'content'

的组件添加到

'center'

区域

var viewpoert = Ext.create('Ext.container.Viewport', {
    layout: 'border'
});

另一个文件

var contentEl = Ext.Create('Ext.Something.What.You.Want', {
     region: "center"
});

最后：

viewport.add(contentEl);

---

这个链接仍然位于谷歌搜索结果的顶部，所以我想我应该添加另一个简洁的解决方案：

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

---

不完全是我想要的。我不想将contentEl添加到视口，我想将contentEl添加到视口中已存在的区域。有意义吗？可能还有另一种解决方案是您想要的：将面板添加到区域：“中心”并将contentEl添加到该面板？

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