Reduzieren verschachtelten Borderlayout-Panel in Ankerlayout-Panel in Ext.Viewport

Question

Ich beginne Ext lernen und stecken mit einem solchen Problem. Ich habe ein Ansichtsfenster mit Code

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

Aber Artikel mit Borderlayout schrumpft und nur 1px Grenze dieses Blocks sichtbar ist. Es ist wichtig für mich, scrollBar zu verwenden, daher kann ich das Rahmenlayout nicht für das gesamte Ansichtsfenster verwenden. Bitte helfen Sie mir, dieses Problem zu lösen

Answer 1

Sie müssen die Höhe des Panels mit dem Rahmenlayout festlegen.

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

Blick auf diese: http://jsfiddle.net/3CabN/4/