Stack toolbars and tabpanels in Sencha Touch - sencha-touch

Question

I'm practicing with Sencha Touch. I created a simple tabbar that's docked at the bottom of the screen. Here's my code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var d1 = new Ext.data.TreeStore({
model: 'ListItem',
root:{text:'D1',items:{}},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var d2 = new Ext.data.TreeStore({
model: 'ListItem',
root:{text:'D2',items:{}},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
tabBar = new Ext.TabPanel({
id:'tabPanel',
fullscreen:true,
tabBar: {
dock: 'bottom'
},
items:[
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}),
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
]
});
}
});
What I want to do next is create a toolbar directly on top of the tab bar. This toolbar will print some text (which I'll eventually use to create a scrolling newsfeed). How do I add a toolbar directly on top of the tab bar?

Answer 1

Here you go :
tabBar = new Ext.TabPanel({
id:'tabPanel',
fullscreen:true,
tabBar: {
dock: 'bottom'
},
items:[
new Ext.NestedList({
dock:'left',
title:'title',
iconCls:'home',
width:'350',
store:d1,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Docked to the bottom'
}]
}]
}),
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
]
});
The first tab now have a toolbar just above the tabbar

Answer 2

I'm playing around with something similar tonight, trying to add a message bar above the tab bar. I found a nice way to do it using the initComponent method (I'm using lazy instantiation and Ext.extend to create xtypes). Here's a modified version of your tabBar code that worked for me:
tabBar = new Ext.TabPanel({
id:'tabPanel',
fullscreen:true,
tabBar: {
dock: 'bottom'
},
items:[
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}),
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
]
listeners: {
beforerender: function(){
this.addDocked({
html: 'hello world',
dock: 'bottom'
});
}
}
});