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

Answer 2

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.