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 viewpoert = Ext.create('Ext.container.Viewport', { 
    layout: 'border' 
}); 

anoter file;

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

最後：

viewport.add(contentEl); 

Answer 2

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