How to make toolbar buttons appear like the tab bar icons

[d5chris]

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:

Can this be done somehow (without using a TabPanel preferably)?

[Larry Q]

Hi Chris,

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

http://www.sencha.com/forum/showthre...s-in-a-Toolbar

[markwyner]

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/d...t.Toolbar.html

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

[d5chris]

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]

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]

d5chris, thank you! Exactly what i was looking for!You save the rest of my day!

[extjs5788]

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'
}
]
}
]
});