extjs4在邊界佈局中重疊面板

Question

我正在使用ExtJS4 MVC結構創建邊界佈局。我正在定義北部，西部，中部和南部地區。所有區域都顯示出來，但問題在於，所有區域都從屏幕的左上角開始，因此它們重疊。

有人可以幫助我得到正確的邊界佈局，以便它適合整個屏幕.. ??

這裏是我的代碼：

Border.js

  Ext.define('IN.view.item.Border',{ 
       extend : 'Ext.container.Container', 
       alias : 'widget.myborderlyt', 
       requires : [ 'Ext.layout.container.Border' ], 
       title : 'Border layout', 
       autoShow : true, 

       defaults : { 
        split : true, 
        width : 800, 
        height : 900 
       }, 
       layout : 'border', 
       items : [ 
         { 
          region : 'north', 
          xtype : 'panel', 
          title : 'North region title here', 
          html : 'Here is the north region..111111111111111111111111111' 
         } , 
         { 
          region : 'west', 
          xtype : 'panel', 
          title : 'west region', 
          html : 'Here is west...1222221111111111', 
          width : 150 
         }, 
         { 
          region : 'center', 
          xtype : 'panel', 
          html : 'Center region....aaaaaaaaaeeeeeeeeeeeeeeeeetttttttttccccccccc' 

         } , 
         { 
          region : 'south', 
          height : 60, 
          html : "South region ..ggggggggggggggggggggggg" 
         } 

       ] 
      }); 

app.js

Ext.Loader.setConfig({ 
enabled : true 
}); 

Ext.application({ 
name : 'IN', 
appFolder : 'app', 
controllers : [ 'Items' ], 
launch : function() { 
    console.log('in LAUNCH-appjs'); 
    Ext.create('Ext.container.Viewport', { 
     layout: 'border', 
     items : [ { 
      xtype : 'myborderlyt' 
     } ] 
    }); 
} 
}); 

Answer 1

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

在此代碼段，視口的佈局是 '邊界'，但其項目沒有'區域'配置。 這是什麼文件說

使用邊界佈局必須與 區域子項目的任何容器：「中心」。中心區域中的子項目將始終爲 調整大小以填充其他區域未使用的剩餘空間 的佈局。

因此，無論是在視口中將「邊框」更改爲「適合」或將區域配置添加到「myborderlyt」。

items : [ { 
     xtype : 'myborderlyt', 
     region : 'center' 

    } ]