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

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

在列表项

上输入height：'auto'

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

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

3 个答案: