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' 

    } ]