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

      1  

    Default Badge Text Plugin

    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,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    472
    Vote Rating
    12
    wemerson.januario will become famous soon enough

      0  

    Default


    thanks!
    Wemerson Januario
    Twitter:
    @januariocoder
    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Developer

  4. #4
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    257
    Vote Rating
    58
    Misiu is a jewel in the rough Misiu is a jewel in the rough Misiu is a jewel in the rough

      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
    82
    Vote Rating
    5
    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
    82
    Vote Rating
    5
    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
    257
    Vote Rating
    58
    Misiu is a jewel in the rough Misiu is a jewel in the rough Misiu is a jewel in the rough

      1  

    Default


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

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Location
    San Juan, PR
    Posts
    82
    Vote Rating
    5
    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