Cannot setBadgeText on Tab within Tab.Panel

[DWTechnologies]

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

[AndreaCammarata]

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

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.

[DWTechnologies]

Spot On.

Thank you so much for such a prompt reply.

DW

[svenna]

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.

Ext.getStore('Oppgaver').on('refresh',function(store) {
    this.getTabPanel().getTabBar().getComponent(1).setBadgeText(store.getCount());
}, this);

[svenna]

Woop- woop there's a beta 2

but the problem remains

[boopasathya]

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