PDA

View Full Version : tabBar footer with Navigation toolbar header?



tdack
23 Jul 2011, 5:56 AM
I'm trying to set up an application that has four different views, all switchable from a permanent TabBar at the bottom of the screen.

Each view (tab) needs it's own nav tool bar at the top (which will have a list or nested list linked for back/forward navigation).

I can get the basic components to display, but something isn't quite right.

The navigation bar at the top is draggable, and the full content of the list is not able to be scrolled up - some portion of it is still shown under the tabBar (so the overall list height is too big)

I think my problem lies in the order that I'm initialising things.

Code is below, and the example can be found at http://home.tdack.com/mvc/list

Any advice will be greatly appreciated.


ListDemo = new Ext.Application({
name: "ListDemo",

launch: function() {
ListDemo.listPanel = new Ext.List({
id: 'indexlist',
store: ListDemo.ListStore,
itemTpl: '{title}<div class="metadata">{[Ext.util.Format.ellipsis(values.description, 50, true)]}</div>',
grouped: true
});

ListDemo.BottomTabs = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'light',
layout: {
pack: 'center'
}
},
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [
{
title: 'Upcoming',
iconCls: 'calendar2',
cls: 'card card1',
items: [{xtype: 'toolbar', title: 'Upcoming Recordings'}, ListDemo.listPanel]
},
{
title: 'Schedule',
iconCls: 'list',
cls: 'card card2',
items: [{xtype: 'toolbar', title: 'Schedule'}]
},
{
title: 'Recordings',
cls: 'card card3',
iconCls: 'film',
items: [{xtype: 'toolbar', title: 'Recordings'}]
},
{
title: 'Settings',
cls: 'card card4',
iconCls: 'settings',
items: [{xtype: 'toolbar', title: 'Settings'}]
}]
});

ListDemo.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'fit',
items: [ListDemo.BottomTabs]
});

ListDemo.ListStore.load();
}
});

tdack
23 Jul 2011, 6:22 AM
OK,

Found a solution at http://www.sencha.com/forum/showthread.php?124345-list-behind-dockedItems-and-not-scrolling-in-TabPanel&p=572279&viewfull=1#post572279:

Changes are below.



...
ListDemo.BottomTabs = new Ext.TabPanel({
dockedItems: [{
dock : 'top',
xtype: 'toolbar',
title: 'Application Title'
}],

tabBar: {
dock: 'bottom',
ui: 'light',
layout: {
pack: 'center'
}
},
...
items: [
{
title: 'Upcoming',
scroll: vertical,
layout: 'fit',
iconCls: 'calendar2',
cls: 'card card1',
items: [ListDemo.listPanel]
},
...
});

mrduck
23 Jul 2011, 6:25 AM
Thanks for sharing the solution mate!