1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    32
    Answers
    4
    Vote Rating
    1
    goatkarma is on a distinguished road

      0  

    Default Answered: badgeCls

    Answered: badgeCls


    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:

    Code:
    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!):

    Code:
    .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.

  2. 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?)

    Code:
    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

    Code:
    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'}        
            ]
        }
    });

  3. #2
    Sencha User
    Join Date
    Mar 2013
    Posts
    32
    Answers
    4
    Vote Rating
    1
    goatkarma is on a distinguished road

      0  

    Default


    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/


    H
    aving 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?
    Last edited by goatkarma; 21 Mar 2013 at 7:51 AM. Reason: updated jsfiddle link to cleaner version

  4. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    32
    Answers
    4
    Vote Rating
    1
    goatkarma is on a distinguished road

      0  

    Default


    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?)

    Code:
    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

    Code:
    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'}        
            ]
        }
    });

Tags for this Thread