PDA

View Full Version : What is the best way to create toolbal and tabbar with panel?



notfair
26 Nov 2010, 1:54 AM
I just started to use sencha touch 2 days ago, and not also a newbie javascript user. I want to know the best way to create a interface with a panel that has tabbar and toolbar. I create this using follow method (base on the example of kitchensink), don't know is it correct or not.

Method 1:


var button = {
text: 'Back',
}

var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar',
items: [button]
});

var toolbar2 = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar2',
items: [button]
});

var bottomBar = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
cardSwitchAnimation:{
type: 'flip',
cover: true
},
defaults:{
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<p>Docking tabs ...</p>',
iconCls: 'info',
style: 'background-color: #CCC',
cls: 'card card1',
items: [toolbar]
},
{
title: 'Favorites',
html: 'Favorites Card',
iconCls: 'favorites',
style: 'background-color: #444',
cls: 'card card2',
badgeText: '4',
items: [toolbar2]
}]
});
Method 2:


var button = {
text: 'Back',
}

var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar',
items: [button]
});

var toolbar2 = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar2',
items: [button]
});

var bottomBar = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
cardSwitchAnimation:{
type: 'flip',
cover: true
},
defaults:{
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<p>Docking tabs ...</p>',
iconCls: 'info',
style: 'background-color: #CCC',
cls: 'card card1',
items: [toolbar]
},
{
title: 'Favorites',
html: 'Favorites Card',
iconCls: 'favorites',
style: 'background-color: #444',
cls: 'card card2',
badgeText: '4',
items: [toolbar2]
}]
});

var mainPanel = new Ext.Panel({
fullscreen: true,
dockedItems: [bottombar]
});
Which way of this is more efficient or both also failed ?

Notice that I create two toolbar to put inside the 'bottombar', because I want different title base on the situation, but is there a way to change the title of the toolbar dynamically base on the 'bottombar' selection and add or remove button accordingly?

thank in advance.

sparkcom
29 Aug 2011, 1:50 AM
toolbar2.setTitle("some text")


i am new to sencha. I got a question regarding Tabbar:

I would like a persistent tabbar at the bottom of the app, and the panels on top can be lots of other panels not related to the tabbar. Is it possible to use a tabbar without having to use a tabpanel?

regards,
Ben
http://www.sparkcomputing.co.uk