1. #1
    Sencha User
    Join Date
    Jan 2011
    Location
    San Juan, PR
    Posts
    80
    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
    8,927
    Vote Rating
    443
    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, Goias, Goiânia
    Posts
    431
    Vote Rating
    6
    wemerson.januario is on a distinguished road

      0  

    Default


    thanks!
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer

  4. #4
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    206
    Vote Rating
    33
    Misiu has a spectacular aura about Misiu has a spectacular aura about

      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
    80
    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
    80
    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
    206
    Vote Rating
    33
    Misiu has a spectacular aura about Misiu has a spectacular aura about

      1  

    Default


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

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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi