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

sencha-touch

Solution

`Ext.List` component's superclass is `Ext.DataView` and not `Ext.Panel`.

Hence, you will need to add two list in two separate panels and add those two panels inside a super panel. Also, you will need to make the `layout:'vbox'` for the superpanel and make `layout:'fit'` for the other two child panels

Here's how you can do it.

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

Problem

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?

Original source