Sencha Touch 1.1 - scrollable vbox layout for Items outside of current view

0
votes

I have a vbox layout on my Ext.Panel with three items, Page1, Page2 and Page3.

    var CountryDetailsAllPages = new Ext.Panel({
        scroll: 'vertical',
        fullscreen: true,
        layout: { type: 'vbox', align: 'stretch' },
        dockedItems: [Toolbar],
        items: [Page1,Page2,Page3]
    });

Page1, Page2 and Page3 contain various other panels such that each Page is too big to display on the whole screen (hence the vertical scroll). Essentially, on load, Page1 should be visible and the user must scroll down to keep reading the other pages.

However, when it renders, Sencha Touch tries to show all the pages and the result is that they all overlap each other!

I'm loading the content of the pages from external HTML files and the content comes from a database and is different depending on the user's selection. I can't rely on a fixed height.

How can I fix this?

3
sencha-touch
The problem is a hbox inside one of the pages (Page1) to give a two-column layout. Sencha sets this hbox panel to a height of 0px, which means placing a panel underneath it (to switch back to one column) overlaps with the hbox's content. I don't know how to stop this? – knowledgequester
Now that I understand the problem a little better, I've created a new question that targets the actual problem: stackoverflow.com/questions/9798268/… – knowledgequester

3 Answers

0
votes

try to specify the height of the panel like

height: '600px', // depending upon your pages height
0
votes

Add a flex config

 flex:3,
 fullscreen: true,
 layout: { type: 'vbox', align: 'stretch' },
 dockedItems: [Toolbar],
0
votes

This is the exact problem I posted on earlier. If you have a panel that has vbox layout. Inside there you have multiple panels, followed by a list. There is no way to easily caculate the height of all items so it scrolls nicely. The only way I found is to set the top panel to a really huge height so that everything will fit. It would be nice if there was a dynamic way to set the height so that all items fit perfectly. IE: The list contents all appear as well as any items around it.