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?

Answer 1

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());
        }
    }
});