如何在VBOX布局中制作Sencha触摸列表显示？

Question

我有一个布局设置为vbox的主面板。我想添加两个单独的列表到面板。我希望这两个列表垂直堆叠显示，并且当它们溢出主面板的底部时，面板应该简单地滚动。

但是，列表似乎需要在FIT布局中设置，才能显示。适合的布局不允许垂直堆叠物品。

我是否缺少布局系统的功能，该功能允许我通过vbox布局告诉列表完全显示在父级内部？

Answer 1

Ext.List组件的超类是Ext.DataView而不是Ext.Panel。

因此，您需要在两个单独的面板中添加两个列表，并在超级面板中添加这两个面板。
此外，您将需要使layout:'vbox'为superpanel并layout:'fit'其他两个子面板

这里是你如何能做到这一点。

.... 
.... 
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

放高度：在列表项“自动”

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