1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
    DWTechnologies is on a distinguished road

      0  

    Question Answered: Cannot setBadgeText on Tab within Tab.Panel

    Answered: Cannot setBadgeText on Tab within Tab.Panel


    In ST1, I could set the badge text to, say 50, with the following:
    Ext.getCmp("MessagesInbox").tab.setBadge(50)

    I might be missing something in ST2, but it doesn't seem possible?

    I've tried setBadgeText which can be used on buttons etc, but no joy.

    Any help gratefully accepted!

    Thanks,
    DW

  2. Hi.
    You should first get the tabBar component and then set the badge text on the wanted tab button.
    Here's an example:

    Code:
    Ext.setup({
        onReady: function() {
    	
    		var setBadge = function(){
    			tabPanel.getTabBar().getComponent(0).setBadge('Hello');
    		};
    	
            var tabPanel = Ext.create('Ext.tab.Panel', {
                fullscreen: true,
                type: 'dark',
                sortable: true,
    			tabBar: {
    				docked: 'bottom',
    				layout: {
    					pack: 'center'
    				}
    			},
                items: [
    				{
    					xtype: 'toolbar',
    					docked: 'top',
    					items: [
    						{
    							xtype: 'button',
    							text: 'Set Badge',
    							handler: setBadge
    						}
    					]
    				},
                    {
                        title: 'Tab 1',
                        html: '1',
                        cls: 'card1',
                        iconCls: 'bookmarks'
                    },
                    {
                        title: 'Tab 2',
                        html: '2',
                        cls: 'card2',
                        iconCls: 'download'
                    },
                    {
                        title: 'Tab 3',
                        html: '3',
                        cls: 'card3',
                        iconCls: 'favorites'
                    }
                ]
            });
        }
    });
    Hope this helps.

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi.
    You should first get the tabBar component and then set the badge text on the wanted tab button.
    Here's an example:

    Code:
    Ext.setup({
        onReady: function() {
    	
    		var setBadge = function(){
    			tabPanel.getTabBar().getComponent(0).setBadge('Hello');
    		};
    	
            var tabPanel = Ext.create('Ext.tab.Panel', {
                fullscreen: true,
                type: 'dark',
                sortable: true,
    			tabBar: {
    				docked: 'bottom',
    				layout: {
    					pack: 'center'
    				}
    			},
                items: [
    				{
    					xtype: 'toolbar',
    					docked: 'top',
    					items: [
    						{
    							xtype: 'button',
    							text: 'Set Badge',
    							handler: setBadge
    						}
    					]
    				},
                    {
                        title: 'Tab 1',
                        html: '1',
                        cls: 'card1',
                        iconCls: 'bookmarks'
                    },
                    {
                        title: 'Tab 2',
                        html: '2',
                        cls: 'card2',
                        iconCls: 'download'
                    },
                    {
                        title: 'Tab 3',
                        html: '3',
                        cls: 'card3',
                        iconCls: 'favorites'
                    }
                ]
            });
        }
    });
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
    DWTechnologies is on a distinguished road

      0  

    Default


    Spot On.

    Thank you so much for such a prompt reply.

    DW

  5. #4
    Touch Premium Member svenna's Avatar
    Join Date
    Jun 2007
    Location
    Oslo,Norway
    Posts
    560
    Answers
    6
    Vote Rating
    24
    svenna has a spectacular aura about svenna has a spectacular aura about

      0  

    Default


    In Beta 1 there seems to be a styling bug:
    I'm using the procedure above, and the badgeText is not position on the button, but on the toolbar itself.

    Capture.PNG

    Layout:
    NavPanel
    - TabPar
    - - Item With Form
    - - Item with List
    - - Item with List
    - - Item with Map

    No custom styling, generated by designer 2 beta -build 276

    The badgeText is expected to be on button 2.

    I'm setting the badge in ha store load event, code snipped is from controller init.
    Code:
    Ext.getStore('Oppgaver').on('refresh',function(store) {
        this.getTabPanel().getTabBar().getComponent(1).setBadgeText(store.getCount());
    }, this);
    Sven Tore Iversen

  6. #5
    Touch Premium Member svenna's Avatar
    Join Date
    Jun 2007
    Location
    Oslo,Norway
    Posts
    560
    Answers
    6
    Vote Rating
    24
    svenna has a spectacular aura about svenna has a spectacular aura about

      0  

    Default


    Woop- woop there's a beta 2

    but the problem remains
    Sven Tore Iversen

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    1
    boopasathya is on a distinguished road

      1  

    Default Hai I Use the following way Its wrk fine:

    Hai I Use the following way Its wrk fine:


    First get tab component from the view.

    Ext.getCmp('Invites').getTabBar().getComponent(0);

    console.log(Ext.getCmp('Invites').getTabBar().getComponent(0)._badgeText);

    Ext.getCmp('Invites').getTabBar().getComponent(0).setBadgeText('5');

    console.log(Ext.getCmp('Invites').getTabBar().getComponent(0)._badgeText);