Zwijanie zagnieżdżonego panelu borderlayout w panelu anchorlayout w Ext.Viewport

Question

Zaczynam uczyć się Ext i tkwić z takim problemem. Mam rzutnię z kodem

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

But elementu z układu granicznego kurczy i tylko 1px granica tego bloku jest widoczny. Dla mnie ważny jest pasek przewijania, więc nie mogę użyć układu obramowania dla całego widoku. Pomóż mi rozwiązać ten problem.

Answer 1

Musisz ustawić wysokość panelu z układem obramowania.

{ 
    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.'} 
    ] 
} 

Spójrz na to: http://jsfiddle.net/3CabN/4/