在Ext.Viewport的anchorlayout面板中折叠嵌套的borderlayout面板

Question

我开始学习Ext并陷入这样的问题。我有一个视口代码

Ext.define('WIMM.view.Viewport', { 
extend: 'Ext.container.Viewport', 
autoScroll: true, 
layout: 'anchor', 
items: [ 
    { 
     border: false, 
     title: 'Header', 
     layout: 'fit', 
     xtype: 'container', 
     html: 'Header block. We\'ll try to do this again' 
    },{ 
     layout: 'border', 
     items: [ 
      { 
       collapsible: true, 
       width: 240, 
       title: 'Aside Column', 
       region:'west', 
       layout: 'fit', 
       html: 'Aside widgets (news, balance, budget, goals) would be here.' 
      },{ 
       title: 'Main Block', 
       border: false, 
       region:'center', 
       layout: 'fit', 
       html: 'Main block were tabPanel would be nested in.' 
      } 
     ] 
    },{ 
     title: 'footer', 
     xtype: 'container', 
     layout: 'fit', 
     html: 'Some information in footer (copyrights, disclaimer link)' 
    } 
] 
}); 

但项目与边框布局萎缩，只有1px的该块的边界是可见的。使用scrollBar对我来说非常重要，所以我无法为整个视口使用边框布局。请帮我解决这个问题

Answer 1

你必须用边框布局设置面板的高度。

{ 
    layout: 'border', 
    height: 100, 
    items: [ 
     { 
     collapsible: true, 
     width: 240, 
     title: 'Aside Column', 
     region: 'west', 
     layout: 'fit', 
     html: 'Aside widgets (news, balance, budget, goals) would be here.'}, 
    { 
     title: 'Main Block', 
     border: false, 
     region: 'center', 
     layout: 'fit', 
     html: 'Main block were tabPanel would be nested in.'} 
    ] 
} 

看看这个：http://jsfiddle.net/3CabN/4/