BadgeCls on a tab panel in Sencha Touch

Question

First ever question on here! For some reason I can't get the badgeCls option to work in Sencha Touch. I'm trying to change the colour of the badge, but the class I pass isn't showing up on the actual badge when it renders.

I've done a quick example here: http://jsfiddle.net/goatkarma/vv66Z/11/

and set the badge class to 'green' for the tab item (which is defined in the CSS).

badgeCls: 'green'

When the app is rendered, the class 'green' is missing from the class:

<span style="" class="x-badge" id="ext-element-20">!!</span>

adding in 'green' to the class in the inspector does change the colour, so it appears that I'm using 'badgeCls' incorrectly, or it's just broken! Any ideas?

As far I can see in the source the badgeCls never gets set on a `Ext.tab.Panel`. This configuration is for buttons only but I understand you expect it to work for a tabpanel too! — A1rPun, Mar 21 '13 at 15:27

A1rPun · Accepted Answer · 2013-03-21T16:26:06.277

I created a small 'fix' for the Ext.tab.Panel. I hope this helps you.

Update

Works like expected now :)
The badgeCls cant have an array as parameter (If you want this functionality let me know ;))

Override:

Ext.define('My.tab.Panel', {
    override: 'Ext.tab.Panel',

    onItemAdd: function(card) {
        var me = this;
        if (!card.isInnerItem()) {
            return me.callParent(arguments);
        }
        var tabBar = me.getTabBar(),
            initialConfig = card.getInitialConfig(),
            tabConfig = initialConfig.tab || {},
            tabTitle = (card.getTitle) ? card.getTitle() : initialConfig.title,
            tabIconCls = (card.getIconCls) ? card.getIconCls() : initialConfig.iconCls,
            tabHidden = (card.getHidden) ? card.getHidden() : initialConfig.hidden,
            tabDisabled = (card.getDisabled) ? card.getDisabled() : initialConfig.disabled,
            tabBadgeText = (card.getBadgeText) ? card.getBadgeText() : initialConfig.badgeText,
            tabBadgeCls = (card.getBadgeCls) ? card.getBadgeCls() : initialConfig.badgeCls,
            innerItems = me.getInnerItems(),
            index = innerItems.indexOf(card),
            tabs = tabBar.getItems(),
            activeTab = tabBar.getActiveTab(),
            currentTabInstance = (tabs.length >= innerItems.length) && tabs.getAt(index),
            tabInstance;
        if (tabTitle && !tabConfig.title) {
            tabConfig.title = tabTitle;
        }
        if (tabIconCls && !tabConfig.iconCls) {
            tabConfig.iconCls = tabIconCls;
        }
        if (tabHidden && !tabConfig.hidden) {
            tabConfig.hidden = tabHidden;
        }
        if (tabDisabled && !tabConfig.disabled) {
            tabConfig.disabled = tabDisabled;
        }
        if (tabBadgeText && !tabConfig.badgeText) {
            tabConfig.badgeText = tabBadgeText;
        }
        if (tabBadgeCls && !tabConfig.badgeCls) {
            tabConfig.badgeCls = Ext.baseCSSPrefix + 'badge ' + tabBadgeCls;
        }
        //<debug warn>
        if (!currentTabInstance && !tabConfig.title && !tabConfig.iconCls) {
            if (!tabConfig.title && !tabConfig.iconCls) {
                Ext.Logger.error('Adding a card to a tab container without specifying any tab configuration');
            }
        }
        //</debug>
        tabInstance = Ext.factory(tabConfig, Ext.tab.Tab, currentTabInstance);
        if (!currentTabInstance) {
            tabBar.insert(index, tabInstance);
        }
        card.tab = tabInstance;
        me.callParent(arguments);
        if (!activeTab && activeTab !== 0) {
            tabBar.setActiveTab(tabBar.getActiveItem());
        }
    }
});

Thanks! It's almost there I think, it gives the badge just the class that is specified in badgeCls, but it still need the class as 'x-badge' in addition to the badgeCls class. Although I guess I can just pass the class in as 'x-badge green' ! http://jsfiddle.net/goatkarma/vv66Z/14/ — Goat Karma, Mar 21 '13 at 16:14
updated post. Has one downside that it doesn't accept an array as parameter. — A1rPun, Mar 21 '13 at 16:26
Yep, that did the trick in my actual code! Didn't need to override teh class either, so just added the onItemAdd function to the tabpanel and it seemed to work perfectly: http://i.imgur.com/M4jImHs.jpg — Goat Karma, Mar 21 '13 at 16:27
Great, updated code works perfectly! Many thanks, don't think i'll need to pass an array in, so should be great just like that. Many thanks, i've been looking at this for hours scratching my head wondering why it wasn't working!! Have marked as best answer, and will upvote once got more rep! — Goat Karma, Mar 21 '13 at 16:40

score 0 · Answer 2 · answered Feb 22 '17 at 23:25

I think this is an oversight that still persists in ExtJS 6.2.x, but it seems there's an easier way instead of monkey-patching and/or overriding the default behavior of the class (which tends to break when upgrading to future releases).

The clue is on the lines here:

tabConfig = initialConfig.tab || {},
...
tabInstance = Ext.factory(tabConfig, Ext.tab.Tab, currentTabInstance);

If you specify a tab configuration object with whatever component you're adding to the tab panel, it starts with that configuration object to instantiate the Ext.tab.Tab instead of defaulting to an empty dict and piecing it together from the other options.

tab: {
  badgeText: 'My text',
  badgeCls: 'x-badge green'
}

Notice that you still have to specify the 'x-badge' class if you want to retain the default styling.

BadgeCls on a tab panel in Sencha Touch

2 Answers2

Update