在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/