1. #1
    Sencha User
    Join Date
    Jan 2011
    Location
    San Juan, PR
    Posts
    84
    Vote Rating
    7
    vela1606 is on a distinguished road

      2  

    Default Badge Text Plugin

    Here is my version of Sencha BadgeText implemented in ExtJs 4.x+ as a plugin.

    Simple!
    Easy!
    Lightweight!
    No additional CSS!


    This plugin will add to functions to you button:
    • setBadgeText(text);
    • getBadgeText();
    They are self explanatory and easy to use.

    Also, the plugin will add a 'badgeclick' event with 2 arguments (theButton, theBadgeText)

    here is the demo https://fiddle.sencha.com/#fiddle/4dc
    Github repo https://github.com/Certun/Ext.ux.plugin.BadgeText

    have fun! :-)

    PHP Code:

    Ext
    .define('Ext.ux.plugin.BadgeText', {
        
    extend'Ext.AbstractPlugin',
        
    alias'plugin.badgetext',

        
    disableBg'gray',
        
    enableBg'red',
        
    textSize10,
        
    textColor'white',
        
    defaultText' ',
        
    disableOpacity0,
        
    align'left',
        
    text' ',
        
    disabletrue,
        
    buttonnull,
        
    /**
         *
         * @param button
         */
        
    init: function(button){

            var 
    me this;

            
    me.button button;
            
    me.text me.defaultText;

            
    button.on('render'me.addBadgeElme);

            
    Ext.apply(button,{

                
    setBadgeText:function(text){

                    
    me.disable typeof text == 'undefined' || text === me.defaultText;
                    
    me.text = !me.disable text me.defaultText;
                    if (
    button.rendered) {
                        
    button.badgeEl.update(text.toString text.toString() : text);
                        if (
    Ext.isStrict && Ext.isIE8) {
                            
    button.el.repaint();
                        }
                        
    me.setDisabled(me.disable);
                    }
                    return 
    button;
                },

                
    getBadgeText:function(){
                    return 
    me.text;
                }


            });

        },

        
    /**
         *
         * @param button
         */
        
    addBadgeEl: function(button){
            var 
    me this,
                
    styles = {
                    
    'position''absolute',
                    
    'background-color'me.disableBg,
                    
    'font-size'me.textSize 'px',
                    
    'color'me.textColor,
                    
    'padding''1px 2px',
                    
    'index'50,
                    
    'top''-5px',
                    
    '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.badgeEl Ext.DomHelper.append(button.el, { tag:'div'cls:'badgeText x-unselectable'}, true);
            
    button.badgeEl.setOpacity(me.disableOpacity);
            
    button.badgeEl.setStyle(styles);
            
    button.badgeEl.update(me.text.toString me.text.toString() : me.text);

        },

        
    /**
         *
         */
        
    onBadgeClick:function(){
            var 
    me this;
            
    me.button.fireEvent('badgeclick'me.buttonme.text)
        },

        
    /**
         *
         * @param disable
         */
        
    setDisabled:function(disable){
            var 
    me this;

            
    me.button.badgeEl.setStyle({
                
    'background-color': (disable me.disableBg me.enableBg),
                
    //'color': (disable ? 'black' : 'white'),
                
    'opacity': (disable me.disableOpacity 1)
            });

            
    me.button.badgeEl.clearListeners();
            if(!
    disableme.button.badgeEl.on('click'me.onBadgeClickme, { preventDefaulttruestopEvent:true });
            
        }
    }); 
    |:| GaiaEHR |:| A Open Source Software for Electronic Health Records - Lead Developer

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,344
    Vote Rating
    490
    scottmartin has a spectacular aura about scottmartin has a spectacular aura about scottmartin has a spectacular aura about

      0  

    Default

    Good job, thank you for the contribution.

  3. #3
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    561
    Vote Rating
    27
    wemerson.januario has a spectacular aura about wemerson.januario has a spectacular aura about

      0  

    Default

    thanks!
    Wemerson Januario
    Blog: http://wemersonjanuario.com.br
    Twitter: @januariocoder
    From: Goiânia, GO, Brazil
    Ext JS developer and consulting

  4. #4
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    258
    Vote Rating
    73
    Misiu is just really nice Misiu is just really nice Misiu is just really nice Misiu is just really nice

      0  

    Default

    Nice plugin
    I found one bug: open fiddle, click "Test" couple of times and then click on last button badge. You'll see alert showing multiple times.

    Also font-size isn't working for me (Win8, Chrome 33)
    I've updated line 62 with below line and font size started working:
    PHP Code:
    'font-size'me.textSize+'px'
    Could You put Your code on GitHub?

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Location
    San Juan, PR
    Posts
    84
    Vote Rating
    7
    vela1606 is on a distinguished road

      0  

    Default

    I will fix the font-size and event issue and put it in Github

    Thank you! :-)
    |:| GaiaEHR |:| A Open Source Software for Electronic Health Records - Lead Developer

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Location
    San Juan, PR
    Posts
    84
    Vote Rating
    7
    vela1606 is on a distinguished road

      0  

    Default

    Event and font issue fixed
    Github link https://github.com/Certun/Ext.ux.plugin.BadgeText
    |:| GaiaEHR |:| A Open Source Software for Electronic Health Records - Lead Developer

  7. #7
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    258
    Vote Rating
    73
    Misiu is just really nice Misiu is just really nice Misiu is just really nice Misiu is just really nice

      1  

    Default

    Nice, thanks for sharing
    I'll folk this definitively!

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Location
    San Juan, PR
    Posts
    84
    Vote Rating
    7
    vela1606 is on a distinguished road

      0  

    Default

    btw, I added the "click" event because in my application I use the plugin on a button that handle a different logic.

    for example:
    PHP Code:
        xtype:'button',
        
    itemId:'userBtn',
        
    plugins:[
            {
                
    ptype:'badgetext',
                
    defaultText0
            
    }
        ] 
    In this case I could user button "click" event or handler to go to an user account panel, and user the badgetext click event to go to a "user notification" panel
    |:| GaiaEHR |:| A Open Source Software for Electronic Health Records - Lead Developer