badgeCls

[goatkarma]

Hopefully this is a quickie, and probably something pretty obvious I'm missing! For some reason I can't get badgeCls to work. There's a few questions around about how to replace the badgeCls 'on the fly' but I just want to set it at startup!

My config for the icon in question:

id: 'accountpanel',        title: 'My...',        
        scrollable:    false,
        iconCls: 'user',
        badgeText:'✓',
        badgeCls: 'yellow',
        styleHtmlContent:    true,
        cls: 'account',

My css styling for 'yellow' (stolen from what someone else has done for the time being, just to get something working!):

.yellow{   background-color: #ffff00 !important;
    background-image:-webkit-gradient(
      linear,
      50% 0%,
      50% 100%,
      color-stop(0%, #FFFF00),
      color-stop(50%, #E5E500),
      color-stop(51%, #E5E500),
      color-stop(100%, #FFFF19)) !important;
   color:#000;
}

And here's the inspector for the badge, without 'yellow' having been added to the class for it:




Am i just missing something really obvious? If I manually add the 'yellow' class to the xbadge span above, the icon does change colour, so it appears that badgecls just isn't adding the class. I also tried using setBadgeCls when that view is shown in my controller, just to see if the icon would change class, but it didn't either.

[goatkarma]

I've knocked up a quick test in jsfiddle to simplify everything right down, and it still doesn't work?
http://jsfiddle.net/goatkarma/vv66Z/11/


Having played around a bit more, it appears that badgeCls works fine on normal buttons within a panel, but doesn't work on the tab bar buttons. Can anyone confirm that's just how it is?

[goatkarma]

It looks like badgeCls only works on buttons with badges, rather than tabs. So....

A guy on stackoverflow helped, and created the below 'onItemAdd' function when creating a tabpanel. Seemed to do the trick. Is there any downside to doing this? (for example compatibility in future releases etc?)

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

So a view for my tabpanel looks like this now

Ext.define("app.view.Main", {    extend: 'Ext.TabPanel',
    xtype: 'mainpanel',
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());
        }
    },
    requires: [
        'stuff'
        
    ],
    config: {
        tabBarPosition: 'bottom',


        items: [
            {xtype:    'homepanel'},
            //{xtype:    'account', hidden: false},
            //{xtype: 'accountmenu', hidden: true},
            {xtype:    'help'}        
        ]
    }
});