Tôi làm cách nào để hiển thị danh sách Sencha Touch trong bố cục VBOX?

Question

Tôi có một bảng điều khiển chính với bố cục được đặt thành vbox. Tôi muốn thêm HAI danh sách riêng biệt vào bảng điều khiển. Tôi muốn hai danh sách xuất hiện theo chiều dọc xếp chồng lên nhau, và khi chúng tràn xuống dưới cùng của bảng điều khiển chính, bảng điều khiển chỉ cần cuộn.

Tuy nhiên, danh sách có vẻ như được yêu cầu đặt trong bố cục FIT, để hiển thị. Bố cục phù hợp không cho phép sắp xếp theo chiều dọc các mục.

Tôi có thiếu tính năng của hệ thống bố cục cho phép tôi cho biết danh sách hiển thị đầy đủ chính nó bên trong bố cục có bố cục vbox không?

Answer 1

Ext.List siêu lớp của thành phần là Ext.DataView và không Ext.Panel.

Do đó, bạn sẽ cần thêm hai danh sách vào hai bảng riêng biệt và thêm hai bảng đó vào trong một bảng siêu.
Ngoài ra, bạn sẽ cần phải thực hiện layout:'vbox' cho siêu bảng và tạo layout:'fit' cho hai bảng con khác

Đây là cách bạn có thể thực hiện.

.... 
.... 
var superpanel = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'vbox',    // to vertically stack two list. 
    items: [ 
     { 
      xtype: 'panel', 
      id: 'panel_1', 
      width: '100%', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'list', 
        flex:1, 
        id: 'list1', 
        store: 'samplestore1' 
       } 
      ] 
     }, 
     { 
      xtype: 'panel', 
      id: 'panel_2', 
      width: '100%', 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'list', 
        id: 'list2', 
        flex:1, 
        store: 'samplestore2' 
       } 
      ] 
     } 
    ] 
}); 
.... 
.... 

Answer 2

var parent = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'vbox', 
    items: [ 
     { 
      xtype: 'list', 
      id: 'list_1', 
      store: 'store1, 
      flex: 1 
     }, 
     { 
      xtype: 'list', 
      id: 'list_2', 
      store: 'store2, 
      flex: 1 
     } 
    ] 
}); 

Answer 3

đặt height: 'auto' trên mục danh sách

items: [ 
    { 
     xtype: 'list', 
     height: 'auto' 
    }, 
    { 
     xtype: 'list', 
     height: 'auto', 
    } 
]