JavaScript
CSS
Run Code
Open in Fiddle
Ext.define('Ext.ux.plugin.BadgeText', { extend: 'Ext.AbstractPlugin', alias: 'plugin.badgetext', textSize: 10, textColor: 'white', disableOpacity: 0, align: 'right', text: '', disable: false, 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); me.button.badgeEl.setOpacity(0); } } else { if (!Ext.isDefined(me.button.badgeEl)) { //add badge me.addBadgeEl(me.button); } me.button.badgeEl.update(me.text); 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': "red", 'opacity': (Ext.isEmpty(me.text) ? 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('200'); } else { compont.setBadgeText(''); } } }); Ext.onReady(function() { Ext.create('KitchenSink.view.button.BasicButtons', { renderTo: document.body }); }); /* Ext.application({ name: 'Fiddle', launch: function() { var b = Ext.widget('button', { renderTo: document.body, text: "<b>Search &gt;&gt;</b>", plugins: [{ ptype: 'badgetext', align: 'right' }] }); console.log(b); b.setBadgeText("demo"); } });*/