Results 1 to 6 of 6

Thread: Cannot setBadgeText on Tab within Tab.Panel

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
      0  

    Question 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
    Location
    Italy
    Posts
    1,395
    Answers
    148
    Vote Rating
    24
      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
    Owner at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Spot On.

    Thank you so much for such a prompt reply.

    DW

  5. #4
    Sencha Premium Member svenna's Avatar
    Join Date
    Jun 2007
    Location
    Oslo,Norway
    Posts
    652
    Answers
    7
    Vote Rating
    40
      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
    Sencha Premium Member svenna's Avatar
    Join Date
    Jun 2007
    Location
    Oslo,Norway
    Posts
    652
    Answers
    7
    Vote Rating
    40
      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
      1  

    Default 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);

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •