CODEWITHSUNDEEP
javascriptmobileextjssencha-touch-2
Shiplu Mokaddim
Shiplu Mokaddim

Reputation: 57650

Show icon on tabbar when tabBarPosition is 'top',

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?

Upvotes: 1

Views: 575

Answers (2)

user2468884
user2468884

Reputation: 1

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.

Upvotes: 0

Andrea Cammarata
Andrea Cammarata

Reputation: 836

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

Upvotes: 1

Related Questions