PDA

View Full Version : How to make toolbar buttons appear like the tab bar icons



d5chris
15 Mar 2011, 2:28 PM
Hi all,
In a toolbar (dockedItem) that's docked to the top of a panel, i want the buttons to appear like they do in the 'bottom tabs' example in the sencha kitchen sink sample. Eg, with a big icon, and small centered text underneath.
Like so:
http://i.imgur.com/v0y7P.png
Can this be done somehow (without using a TabPanel preferably)?

Larry Q
15 Mar 2011, 3:14 PM
Hi Chris,

I asked something quite similar not long ago, and received a good answer. Hope this can help:

http://www.sencha.com/forum/showthread.php?126183-using-TabPanel-button-icons-in-a-Toolbar

markwyner
15 Mar 2011, 3:41 PM
Glad that worked out, Larry.

Chris, I believe you can load a toolbar and add a number of buttons to it which you could then style by overriding sencha-touch.css with your own classes.

The toolbar setup is easy enough:
http://dev.sencha.com/deploy/touch/docs/output/Ext.Toolbar.html

Then, you can reference the post Larry mentioned which outlines how to set up new styles.

d5chris
15 Mar 2011, 3:49 PM
Thanks larry.
I was hoping i could use a TabBar like the TabPanel uses, however the CSS styles are written in such a way so that doesn't work.
I'll probably just do what you say and write some extra CSS over a normal toolbar.

d5chris
15 Mar 2011, 5:52 PM
In the end, got them looking pretty close with the following code:

This property on the toolbar:

cls: 'nav-bar',

And this CSS:


.nav-bar .x-button {
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
box-orient: vertical;
}
.nav-bar .x-button img {
position:relative;
top:-3px;
}
.nav-bar .x-button span {
padding-top:3px;
font-size: 9px !important;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-shadow: #000 0 -1px 1px;
}

CrushYar
24 Mar 2011, 6:03 AM
d5chris, thank you! Exactly what i was looking for! You save the rest of my day!

extjs5788
23 Oct 2012, 11:02 AM
Apply the baseCls:'x-tabbar' to toolbar and baseCls:'x-tab' to buttons inside the toolbar. and it should work.

As shown below, you need to apply the x-tab-active class when the button is pressed.

Ext.create('Ext.Container', {
fullscreen: true,
layout: {


type: 'vbox',
pack: 'center'


},

items: [
{


xtype : 'toolbar',
docked: 'bottom',
baseCls:'x-tabbar',


defaults : {

iconMask: true,
align : 'center',

baseCls:'x-tab'

},
items: [
{
xtype : 'spacer'
},
{

text:'Accounts',
iconCls:'home',
ui :'normal',
iconAlign : 'top',
handler: function() {
var b = Ext.ComponentQuery.query('button[iconCls="action"]')[0];
b.removeCls('x-tab-active');
this.addCls('x-tab-active');
}
},
{
text : 'Options',
iconCls : 'action',
ui : 'normal',
iconAlign : 'top',
handler: function() {
var b = Ext.ComponentQuery.query('button[iconCls="home"]')[0];
b.removeCls('x-tab-active');
this.addCls('x-tab-active');
}
},
{
xtype : 'spacer'
}
]
}
]
});