sencha-touch - how do i make a Sencha Touch list display in a VBOX layout?

Question

I have a main panel with layout set to vbox. I want to add TWO separate lists to the panel. I want the two lists to appear vertically stacked, and as they overflow the bottom of the main panel, the panel should simply scroll.

However, lists appear to require to be set in a FIT layout, in order to display. Fit layouts do not permit vertically stacking of items.

Am I missing a feature of the layout system that allows me to tell the list to fully display itself inside a parent with a vbox layout?

Answer 1

Ext.List组件的超类 isExt.DataView和 not 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',
     }
]