How can I display a container and list in a Sencha Touch 2.2 view and have the whole view scrollable?

Question

I'm trying to create a view in Sencha Touch 2.2.1 that contains a docked toolbar at the top with a container below and list below that. I want the view rendered so that the container takes up just the space it needs to display its content and the list below to be the height of all of its content. I don't want the list itself to scroll but instead for the whole view to scroll so that when scrolling down the container scrolls up out of the viewport.

Below is my attempt, with a live demo available in this jsfiddle .

The view renders correctly but isn't scrollable, uncommenting the scrollable: true on the parent container makes the list disappear.

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    config: {
        fullscreen: true,
        // This is the behaviour I want i.e. the whole container to be scrollable but when enabled the list disappears :(
        // scrollable: true, 
        items: [
        {
            docked : 'top',
            xtype: 'toolbar',
            title: 'Container with Infinite List Demo'
        },
        {
            html: "<h1>Hello World!</h1><p>I'm a basic container with a list below:</p>"
        },
        {
            xtype: 'list',
            scrollable: false,
            height: '100%',
            itemTpl: '{name}',
            data: [
                {name: "Item 1"},
                {name: "Item 2"},
                {name: "Item 3"},
                {name: "Item 4"},
                {name: "Item 5"},
                {name: "Item 6"},
                {name: "Item 7"},
                {name: "Item 8"},
                {name: "Item 9"},
                {name: "Item 9"},
                {name: "Item 10"},
                {name: "Item 11"},
                {name: "Item 12"},
                {name: "Item 13"},
                {name: "Item 14"},
                {name: "Item 15"},
                {name: "Item 16"},
                {name: "Item 17"},
                {name: "Item 18"},
                {name: "Item 19"},
                {name: "Item 20"},
            ]
        }
        ]
    }
});

Attempted fixes I have tried include:

• Setting the layout to vbox as suggested in SO: how to display list and other labels in single page using sencha touch2 .
• Setting height to auto as suggested in SO: Sencha touch make a list inside a container visible .

Answer 1

You have to set a specific list height in order to let it show. If you doesn't know the final height of the list, try to get it:

attach this handler to your list:

listeners: {
    painted: function() {
        this.setHeight(this.itemsCount*this.getItemHeight());
    }
}