如何在VBOX布局中显示Sencha Touch列表？

Question

我有一个主面板,布局设置为vbox.我想在面板中添加两个单独的列表.我希望这两个列表垂直堆叠,当它们溢出主面板的底部时,面板应该只是滚动.

但是,列表似乎需要在FIT布局中设置才能显示.适合的布局不允许垂直堆叠项目.

我是否缺少布局系统的一项功能,允许我告诉列表在具有vbox布局的父级内部完全显示自己？

Answer 1

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

因此，您需要在两个单独的面板中添加两个列表，并将这两个面板添加到超级面板中。此外，您还需要为超级面板
制作并为其他两个子面板制作layout:'vbox'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'
                 }
            ]
         }
    ]
 });
....
....