PDA

View Full Version : Nested Panels, Constant bottom toolbar, Page-Dependent top toolbar



matrym
11 Apr 2011, 9:20 PM
I'm trying to create a constant bottom toolbar, which controls a panel above it. Then the panel above it should have a toolbar of its own (at the top). I've attempted the below code, which almost works, but I can't see the html of the sub-page inner panels. I think it's because the panel isn't taking up the remaining height, but I don't know why.

Anyone have any ideas? Thanks!

PS: I'm cross posting from StackOverflow for better formatting and perhaps a wider audience. If you're interested in the code formatting:

http://stackoverflow.com/questions/5630295/nested-panels-toolbars-in-sencha-touch


Ext.setup({
onReady: function() {


// Sub-page sections
var blah = {
style: "background-color: #B22222; color:#FF0000;",
title: "one",
html: "Why can't I see this html",
layout:"fit",
flex: 1
};
var blah2 = {
style: "background-color: #404040; color:#000000;",
title: "one",
html: "Why can't I see this html",
layout:"fit",
flex: 1
};

// Main portion of the page, which includes top toolbar and content
var page1 = new Ext.TabPanel({
dock: "bottom",
layout: "card",
items: [blah, blah2, blah],
title: "one",
flex: 1
});

// This is the outer panel with the bottom toolbar
var wrapper = new Ext.Panel({
fullscreen: true,
items: page1,
dockedItems: [
{
xtype: "toolbar",
dock: "bottom",
items: [
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]
}
]
});
}
});

matrym
12 Apr 2011, 12:48 AM
http://stackoverflow.com/questions/5630295/nested-panels-toolbars-in-sencha-touch/5632102#5632102

Thanks to Nelstrom (of Sencha tutorial video fame)!

Bucs
12 Apr 2011, 10:56 AM
This works for a very basic site, but you'll find that as your apps grow that a tab panel is not the optimal "shell" for a larger scale app. You should try to use a Viewport control as the application container and then use that as the applciation's container into which you slide in the required page functionality...especially if you plan to use the newer MVC pattern for development.

With the current Tab control implementation, you'll soon run into situations where you'll want to slide in an additional page (say a product detail page from a product list control), and if you are using a tab control then it'll try to add an additional tab for every page you try to show in the tab. You'll have to write a lot of custom code to override this behavior, which I found to be quite annoying.

Be sure to check out the examples like twitter and Kiva that use Viewport shells for examples.

mildtee
20 Jul 2011, 7:06 AM
Bucs, thank you for writing it out That is exactly where I got stuck.

Where do I get a good example of and app that uses tabs on the bottom, but also has pages (say a product detail page from a product list control) that do not need to be linked fro the tab?

Thanks