javascript - ExtJS:将项目动态添加到视口(viewport)区域

Question

假设我在一个创建 Viewport 的文件中有一个 JS:

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

现在假设我有另一个 JS 文件随后加载这个组件定义:

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

如何将带有 contentEl: 'content' 的组件添加到 'center' 区域？

Answer 1

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