ExtJS: динамически добавлять элемент в область просмотра

Question

Допустим, у меня есть JS в одном файле, который создает Viewport:

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

Answer 2

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

файл с комментариями;

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

наконец:

viewport.add(contentEl);

Answer 3

Эта ссылка все еще находится в верхней части результатов поиска Google, поэтому я решил добавить еще одно удобное решение:

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