Thu gọn bảng điều khiển lồng ghép lồng nhau trong bảng điều khiển neolayout trong Ext.Viewport

Question

Tôi bắt đầu học Ext và mắc kẹt với vấn đề như vậy. Tôi có chế độ xem có mã số

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

Nhưng mục có bố cục đường viền co lại và chỉ có đường viền 1px của khối đó hiển thị. Điều quan trọng đối với tôi là có scrollBar, vì vậy tôi không thể sử dụng bố cục đường viền cho toàn bộ chế độ xem. Vui lòng giúp tôi giải quyết vấn đề đó

Answer 1

Bạn phải đặt chiều cao của bảng điều khiển bằng bố cục đường viền.

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

Nhìn này: http://jsfiddle.net/3CabN/4/