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

Question

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

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

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

Answer 1

Ext.List组件的父类(super class)是 Ext.DataView而不是 Ext.Panel .

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