Stack two Sencha Ext.Lists vertically

Question

I want to stack two Sencha Touch Ext.List's vertically. I want both of these lists to belong to a container that is scrollable. The problem I'm having is that I'm not sure how I can configure these lists to be fully expanded components (the containing container should take care of the scrolling).

I.e. you would have to scroll down the entire contents of the first list to get to the second list.

Additionally, the containing container should also be possible to fill with other stacked components, such as a form.

Example:

-> Container (should show scroll bars if contained content doesn't fit in the container)
   -> Form (should not show any scrollbars, thus fully expanded)
   -> List (should not show any scrollbars, thus fully expanded)
   -> List (should not show any scrollbars, thus fully expanded)

UPDATE

I've managed to get something working by setting scrollable to null for the lists. However, it only works with Sencha Touch versions prior to 2.1.0, thus 2.0.1 works fine.

    var mainPanel = Ext.create("Ext.Container",
    {
        fullscreen: true,
        layout: 'vbox'
    });

    var subPanel = Ext.create("Ext.Container", {
        flex: 1,
        layout: 'vbox'
    });

    Ext.define('MyList', {
        extend: 'Ext.List',
        config: {
            scrollable: null,
            fullscreen: false
        }
    });

    var itemName = 'MyItem';
    Ext.define(itemName, {
        extend: 'Ext.data.Model',
        config: {
            fields: ["title"]
        }
    });

    var store = Ext.create('Ext.data.Store', {
        model: itemName,
        data: [
                { title: 'row1' },
                { title: 'row2' }
            ]
    });

    var list1 = Ext.create('MyList');
    list1.setItemTpl('<div>List 1 - {title}</div>');
    list1.setStore(store);

    var list2 = Ext.create('MyList');
    list2.setItemTpl('<div>List 2 - {title}</div>');
    list2.setStore(store);

    subPanel.add(list1);
    subPanel.add(list2);

    mainPanel.add(subPanel);
    Ext.Viewport.add(mainPanel);

Any ideas why it's not working in 2.1.0+?

Answer 1

Have you tried setting the scrollable config of the lists to false?

I recommend extending Ext.dataview.DataView rather than starting from Ext.dataview.List. You will have to build up some of your own styling, but I've found that's usually easier than trying to remove unwanted functionality from Ext.List.