ExtJS:动态地将项目添加到视口区域

ExtJS: Dynamically add item to viewport region

本文关键字：添加 视口 区域 项目 动态 ExtJS      更新时间：2023-09-26

假设我在一个文件中有一个JS可以创建一个Viewport：

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

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

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

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

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

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);
});
相关文章：