2 scrolling lists in Sencha Touch don't scroll

Question

I have 2 List items in Sencha Touch, that have been added to my panel. Each list has width=50% and height=fullscreen. The panel has height full screen. Each list has a Store containing about 100 items.

Sencha mis-estimates the extent of the list and does not allow me to scroll down. I can only go down a couple of items and it snaps back.

How do I get side by side list items to scroll?

Thanks, Gerry

Answer 1

This works for me I think the trick is the Layout value for each Panel.

'hbox' for parent, then 'fit' for the two half panels, if the "side by side" panels aren't set to fit a list won't scroll properly.

root = new Ext.Panel({
    fullscreen: true,
    layout: 'hbox',
    version: '1.1.1',
    scroll: false,
    items: [{
        xtype: 'panel',
        width: '50%',
        height: '100%',
        layout: 'fit',
        items: [{
            xtype: 'list',
            itemTpl: '{display}',
            store: new Ext.data.Store({
                model: 'item',
                data: [...]
            })
         }]
    }, {
        xtype: 'panel',
        width: '50%',
        height: '100%',
        layout: 'fit',
        items: [{
            xtype: 'list',
            itemTpl: '{display}',
            store: new Ext.data.Store({
                model: 'item',
                data: [...]
            })
         }]
     }]
 });