Inline Header, Navbar and Footer like JQuery Mobile?

[JEBriggs]

I'm new to Sencha Touch and I'm designing an app that will have an inline header, top navbar, and bottom navbar, all of which are inline and scroll with the rest of the content (vs being fixed).

This is easy to do in JQuery Mobile but I can't figure out how to do the same with Sencha Touch and this it is a decisive issue for choosing between the two because I need to maximize screen space for content (vs toolbars, header).

I've played with setting the scrollable on the main panel and other places. I can do this in ExtJs but can't do so with Touch.

I "think" I resolved this issue. See my comments and additional questions after the code.

Here's my example code:

App.js:

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    stores: [
        'Contacts'
    ],
    views: [
        'Main'
    ],
    name: 'MyApp',

    launch: function() {
        Ext.create('MyApp.store.Contacts');
        Ext.create('MyApp.view.Main', {fullscreen: true});
    }

});

Main.js

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    alias: 'widget.main',

 /*   config: {
        layout: {//tried different layouts, would expect to use default on main
            type: 'vbox'
        },*/
        scrollable: true,
        items: [
            {
                xtype: 'container',
                itemId: 'headerCnt',
                items: [
                    {
                        xtype: 'titlebar',
                        docked: 'top',
                        title: 'Title'
                    },
                    {
                        xtype: 'toolbar',
                        docked: 'top',
                        items: [
                            {
                                xtype: 'segmentedbutton',
                                items: [
                                    {
                                        xtype: 'button',
                                        text: 'Page1'
                                    },
                                    {
                                        xtype: 'button',
                                        text: 'Page 2'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'container',
                itemId: 'cardPanel',
                layout: {
                    type: 'card'
                },
                flex: 1,
                items: [
                    {
                        xtype: 'list',
                        id: 'pageList1',
                        itemId: 'page1List',
                        scrollable: false,
                        itemTpl: [
                            '<div>List Item {firstName}, {lastName}</div>'
                        ],
                        store: 'Contacts',
                        pinHeaders: false
                    },
                    {
                        xtype: 'list',
                        itemId: 'page2List',
                        itemTpl: [
                            '<div>List Item {string}</div>'
                        ]
                    }
                ]
            },
            {
                xtype: 'container',
                itemId: 'footerContainer',
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'top',
                        items: [
                            {
                                xtype: 'segmentedbutton',
                                items: [
                                    {
                                        xtype: 'button',
                                        text: 'Settings'
                                    },
                                    {
                                        xtype: 'button',
                                        text: 'Etc'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }

});

Contacts.js

Ext.define('MyApp.store.Contacts', {
    extend: 'Ext.data.Store',

    config: {
        data: [
            {
                firstName: 'Tommy',
                lastName: 'Maintz'
            },
            {
                firstName: 'Ed',
                lastName: 'Spencer'
            },
            {
                firstName: 'Jamie',
                lastName: 'Avins'
            },
            {
                firstName: 'Aaron',
                lastName: 'Conran'
            }//exc
        ],
        storeId: 'Contacts',
        proxy: {
            type: 'ajax',
            reader: {
                type: 'json'
            }
        },
        fields: [
            {
                name: 'firstName'
            },
            {
                name: 'lastName'
            }
        ]
    }
});

If I set scrollable to true on the list, it scrolls independently. FAIL
If I set scrollable to false, the list has zero height. FAIL

Set cardPanel layout from card to default. Programmatically hide and show the "cards". SUCCESS

What's the best practice here?

(also when I scroll to the top or bottom, it "overscrolls" to show a white background and bounces back. Is there a way to eliminate this?)

[mitchellsimoens]

You have the toolbars docked and therefore will stay in place as the panel will scroll. Remove it and ensure sizing and it should take part in the scrolling.