JavaScript
CSS
Run Code
Open in Fiddle
Ext.define('Ext.ux.plugin.BadgeText', { extend : 'Ext.AbstractPlugin', alias : 'plugin.badgetext', textSize : 10, textColor : 'white', backgroundColor: 'red', disableOpacity : 0, align : 'right', text : '', disable : false, animateDuration: 300, button : null, /** * * @param button */ init : function (button) { var me = this; me.button = button; Ext.apply(button, { setBadgeText: function (text) { if (typeof text === "string") me.text = text; if (Ext.isEmpty(me.text)) { if (Ext.isDefined(me.button.badgeEl)) { //hide badge me.button.badgeEl.update(me.text); if (me.animateDuration) { me.button.badgeEl.animate({ duration: me.animateDuration, from : { opacity: 1 }, to : { opacity: 0 } }); } else { me.button.badgeEl.setOpacity(0); } } } else { if (!Ext.isDefined(me.button.badgeEl)) { //add badge me.addBadgeEl(me.button); } me.button.badgeEl.update(me.text); if (me.animateDuration) { me.button.badgeEl.animate({ duration: me.animateDuration, from : { opacity: 0 }, to : { opacity: 1 } }); } else { me.button.badgeEl.setOpacity(1); } } }, getBadgeText: function () { return me.text; } }); button.on('render', me.button.setBadgeText, me); }, /** * * @param button */ addBadgeEl: function (button) { var me = this, styles = { 'position' : 'absolute', 'background-color': me.backgroundColor, 'opacity' : (Ext.isEmpty(me.text) || me.animateDuration ? 0 : 1), 'font-size' : me.textSize + 'px', 'color' : me.textColor, 'padding' : '1px 2px', 'index' : 50, 'top' : '-8px', 'border-radius' : '3px', 'font-weight' : 'bold', 'text-shadow' : 'rgba(0, 0, 0, 0.5) 0 -0.08em 0', 'box-shadow' : 'rgba(0, 0, 0, 0.3) 0 0.1em 0.1em', 'cursor' : 'pointer' }; if (me.align == 'left') { styles.left = '2px'; } else { styles.right = '2px'; } button.setStyle = { "overflow": "visible" }; button.badgeEl = Ext.DomHelper.append(button.el, { tag: 'div', cls: 'badgeText x-unselectable' }, true); button.badgeEl.setStyle(styles); }, /** * */ onBadgeClick: function () { var me = this; me.button.fireEvent('badgeclick', me.button, me.text) }, /** * * @param disable */ setDisabled: function (disable) { var me = this; me.button.badgeEl.setStyle({ 'opacity': (disable ? 0 : 1) }); me.button.badgeEl.clearListeners(); if (!disable) me.button.badgeEl.on('click', me.onBadgeClick, me, { preventDefault: true, stopEvent : true }); } }); Ext.define('KitchenSink.view.button.BasicButtons', { extend: 'Ext.Container', xtype : 'basic-buttons', cls : 'button-view', layout: 'vbox', initComponent: function () { Ext.apply(this, { width: 475, items: [{ xtype : 'checkbox', boxLabel : 'show?', margin : '0 0 0 10', listeners: { change: this.toggleDisabled, scope : this } }, { xtype : 'container', layout: { type : 'table', columns: 4, tdAttrs: { style: 'padding: 5px 10px;' } }, items: [{ xtype : 'button', text : 'Medium', scale : 'large', plugins: [{ ptype: 'badgetext', text : 'Awesome!' }], //badgeText: '17', }, { xtype : 'button', text : 'Large', scale : 'large', //badgeText: '18', plugins: [{ ptype: 'badgetext' }], id : 'test' }] }] }); this.callParent(); }, toggleDisabled: function (checkbox, newValue, oldValue) { var compont = Ext.getCmp('test'); if (newValue) { compont.setBadgeText('+5'); } else { compont.setBadgeText(''); } } }); Ext.onReady(function () { Ext.create('KitchenSink.view.button.BasicButtons', { renderTo: document.body }); });