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

Posted 2023-02-26

【中文标题】如何在 VBOX 布局中显示 Sencha Touch 列表？

【英文标题】：how do i make a Sencha Touch list display in a VBOX layout?

【发布时间】：2012-04-30 04:54:16

【问题描述】：

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

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

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

【参考方案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'
                 
            ]
         
    ]
 );
....
....

【讨论】：

我认为您不需要将每个列表嵌套在包装器面板中。我很高兴地将可滚动列表作为 vbox 容器的一等子项。虽然如果您使用的是 vbox，除非停靠，否则您应该为每个孩子设置一个 flex 值。

啊！我错过了那个属性。应用flex 将有助于列表获得相等的空间...

我会仔细检查这一点，但我认为 flex 解决方案使每个列表恰好占据父级高度的一半。 （让列表项在每个列表中滚动）。我希望每个列表不要滚动，并完整列出他们的项目。我希望父面板滚动两个子列表，作为 vbox 子级。 （或者你的解决方案会这样做吗？）

答案是将列表项直接留在vbox中，但将height:'auto'放在列表中而不是flex。

【参考方案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
         
    ]
 );

【参考方案3】：

将 height:'auto' 放在列表项上

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