View Full Version : A Penel with Toolbar (top) and TabPanel (bottom)?

23 Jul 2011, 6:06 AM
Good day,

I'm learning Sencha Touch. There are some great (video) tutorials, great examples and the API documentation is helpful. I'm playing around to get an understanding about the framework. However, there is something I'm unable to do and I think it's fundamentional to get a proper understanding.

My app is based on TabPanels. However, I want to have a Toolbar on the top of the screen with a title. I don't want to define this Toolbar in every individual card in the TabPanel, the Toolbar has to stay on top. It is fixed.

I was thinking that I should do it like this:
- Create a panel (Panel)
- This panel has two docked items, the Toolbar (top) and the TabPanel (bottom).

But this doesn't really do what I want. Yes, it shows the toolbar and it shows the tabs, but the cards of the TabPanel won't show up correctly. It does when I set the TabPanel on "fullscreen", but then the Toolbar is gone as well. Can somebody explain me how to approach this and give me some example code? Here an image to illustrate (http://postimage.org/image/bai1u0xw/)

Thank you.

23 Jul 2011, 6:15 PM
Here is one way to do it:

//icon : 'acsoIcon.png',
//tabletStartupScreen : 'tablet_startup.png',
//phoneStartupScreen : 'acsoSplash.png',
glossOnIcon : false,
onReady : function () {

var panel1 = new Ext.Panel({
title : 'Panel1',
iconCls : 'more',
id : 'panel1',
html : 'Here is panel1'

var panel2 = new Ext.Panel({
title : 'Panel2',
iconCls : 'more',
id : 'panel2',
html : 'Here is panel2'

var mainPanel = new Ext.TabPanel({
tabBar : {
dock : 'bottom',
layout : {
pack : 'center'
dockedItems : [{
dock : 'top',
xtype : 'toolbar',
title : 'Standard Titlebar'
items : [
fullscreen : true,
layout : 'fit'



24 Jul 2011, 5:42 AM
Thank you man. This definitely helps me getting the understanding of the framework.

16 Apr 2012, 3:07 AM
Its really useful for me ..