Show icon on tabbar when tabBarPosition is 'top',

Question

The following code shows icon for each tab title.

Ext.define("MyAPP.view.Main", {
    extend : 'Ext.tab.Panel',
    config : {
        tabBarPosition : 'bottom', // <--- Line of interest
        items : [{
            title: "Contacts",
            iconCls: "team",
        }]
    }
});

See sample bellow.

Icon is shown on bottom

But If I change it to tabBarPosition: 'top' no icon is seen. Whole style changed.

No Icon is shown on top

How can I show icons when tab bar position is top?

Andrea Cammarata · Accepted Answer · 2013-01-02T07:50:00.120

1

Which version of ST are you using? It perfectly works on 2.1.0.

Top Docked TabBar

EDIT: Be sure you are using at least Sencha Touch 2.1.0-b1 because top docked toolbar icons has been introduced from that version as you can read in the release notes:

[TOUCH-2] Top docked tab bars can now have icons

edited Jan 02 '13 at 07:50

answered Jan 01 '13 at 17:31

Andrea Cammarata

836
5
7

1

That's because top docked TabBar icons have been introduced since version 2.1.0-b1 as you can see from the release notes: [TOUCH-2] Top docked tab bars can now have icons. – Andrea Cammarata Jan 02 '13 at 07:31
Also I see NO toolbar icon is shown. Even its shown kitchen sink example. – Shiplu Mokaddim Jan 02 '13 at 07:43
Still talking about 2.0.1 right? Open the toolbars example. Toolbar icons are shown without problems. – Andrea Cammarata Jan 02 '13 at 07:48
Some toolbar icons are shown and other are not shown. Only 'action' is show. I used `iconCls: 'user_send'` its not shown. – Shiplu Mokaddim Jan 02 '13 at 08:11
Thanks a lot for helping me out and the new info about ST 2.1. I look into that. This http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch helped a lot too. – Shiplu Mokaddim Jan 02 '13 at 08:18

score 0 · Answer 2 · answered Jun 09 '13 at 18:36

Just in case this helps to anyone... I don't know why, but sometimes, when one upgrades to 2.1 or earlier, the icons don't automatically show on tabbar docked top (this might be because I'm working with linux). In this case, you have to do the following:

Select the element of the tabbar to which you want to add icon to (when I say the element in the tabbar, of course I mean the element in the tabpanel, I know the tabbar is another element in the tabpanel, different from the others).
Go to the config panel.
Add manually the property "iconCls", because you're not gonna find it.
Then set that property to be a string, and finally set its value to "home", "info", or whatever icon you want.

All this, of course, is using the Architect. I'm not a programmer, technically speaking, so you'll have to excuse me if my writting is bad in any sense.

Nice point. Though it was actually a version issue from my side. — Shiplu Mokaddim, Jun 10 '13 at 13:42

Show icon on tabbar when tabBarPosition is 'top',

2 Answers2