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

anoter文件;

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

最后：

viewport.add(contentEl);

Answer 3

此链接仍然是谷歌搜索结果的首选，所以我想我会添加另一个简洁的解决方案：

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

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

3 个答案: