Sencha touch card layout problem

Question

I am trying to build a website for an iphone using sencha touch. I am newbie in sencha and ext.

I would like to have an layout with a header, footer and inner content. It can be understand as masterpage with header & footer which will be used on each page.

Header and footer should be scrollable (not docked!) and I would like to have an animation between pages.

Generally the website will have a home with header, menu and footer. If user clicks some button from menu (i.e. 'ABOUT') the page should slide to the right to 'ABOUT' page. This page will have a header, some content, back button and footer. Header & footer will look the same as on home page.

I've seen many solutions with docked header and footer but I haven't found any which works in the way I want (the problem is that I want header and footer to be scrollable).

I have tried to use a card layout panel nested in vbox panel, I have tried also card layout panel nested in fit layout panel nested in vbox panel (please find below the sample code).

//home, video and contact panels are quite similar to about panel
about = new Ext.Panel({
                layout: {
                    type: 'vbox',
                    pack: 'start'
                },
                items: [
                    {
                        html: ['<div class="pageWrapper"><h1><span>About</span></h1></div>']
                    }
                ] // end items
            });

    cardPanel = new Ext.Panel({
            layout: 'card',
                items: [home, about, video, contact]
            });

    cardWrapper = new Ext.Panel({
                layout: 'fit',
                items: [cardPanel]
            });

    var mainPanel = new Ext.Panel({
                layout: 'vbox',
                scroll: 'vertical',
                fullscreen: true,
                items: [header, cardWrapper, btnBack, footer]
            });

When I use above code the cardWrapper has height=0 and width=0. I can only see the home page when I set height & width of cardWrapper to some value. I have also tried to set: autoHeight: true For home panel, cardPanel and cardWrapper and had no luck :/

Do you have any other ideas how can I achieve this layout of the website?

Your title isn't very descriptive; it should be made in the form of a question. Editing it will probably yield more views and possible answers. — Soviut

mistagrooves mistagrooves · Accepted Answer · 2011-04-20T20:24:16

First, you can have an internally scrollable header and footer when docked. I've done it before where a toolbar that is docked to the main view, but can still be scrolled horizontally. All you have to do is set the scroll property of the toolbar.

Second, setting the 'flex' property of the cardPanel to 1, and giving a fixed height (or a flex as well) to header & footer may resolve the issue you are seeing.

So:

var cardPanel = new Ext.Panel({
   flex: 1,
   layout: 'card',
   items: [home, about, video, contact]
});

var header = new Ext.Panel({
   height: 100,
   html: "<h1>Header</h1>"
});

var footer = new Ext.Panel({
   height: 100,
   html: "<h1>Footer</h1>"
});

var mainPanel = new Ext.Panel({
            layout: 'vbox',
            scroll: 'vertical',
            fullscreen: true,
            items: [header, cardPanel, btnBack, footer]
});

Finally, what you could try is turn the cardPanel into a Carousel. You can turn off the indicator on the object with the property 'indicator'. To switch between the cards you would use the same setActiveItem call.

Sencha touch card layout problem

1 Answers