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

6
votes

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?

3
sencha-touch

3 Answers

3
votes

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

put height:'auto' on the list item

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