JavaScript
CSS
HTML
Run Code
Open in Fiddle
Ext.application({ name: 'Fiddle', requires: ['Ext.ux.mixin.Badge'], launch: function() { // button example Ext.create({ xtype: 'button', renderTo: Ext.get('buttonTest'), text: 'Activate Subscription', badgeText: 'New!' }); // tab panel example Ext.create({ xtype: 'tabpanel', renderTo: Ext.get('tabPanelTest'), cls: 'allow-overflow', // important to have this added! items: [{ title: 'Home' }, { title: 'Messages', tabConfig: { badgeText: '3' // badgeText is set within tabConfig } }, { title: 'Alerts', closable: true, tabConfig: { badgeText: 18 } }], listeners: { boxready: function(tabPanel) { var alertsCard = tabPanel.items.getAt(2); var alertsTab = alertsCard.tab; function increaseAlerts() { var count = Ext.Number.from(alertsTab.getBadgeText(), 0) + 1; alertsTab.setBadgeText(count); if (count < 100) { Ext.Function.defer(increaseAlerts, 250); } } increaseAlerts(); } } }); // badge colors Ext.create({ xtype: 'panel', renderTo: Ext.get('badgeColorsTest'), tbar: { cls: 'allow-overflow', items: [{ text: 'Option 1', badgeText: 'Red' // default }, { text: 'Option 2', badgeText: 'Blue', cls: 'blue-badge' }, { text: 'Option 3', badgeText: 'Green', cls: 'green-badge' }] } }); } });