1. #1
    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 Ext.ux.button.BadgeButton

    Ext.ux.button.BadgeButton


    This is my first extension I'm publishing so please forgive me my mistakes.

    Screenshot:
    badgebutton.jpg

    Demo: https://fiddle.sencha.com/#fiddle/2ar

    Code:
    PHP Code:
    /**
     * @class Ext.ux.button.BadgeButton
     * @extends Ext.button.Button
     * 
     * @author Tomasz Jagusz
     * based on: http://blogs.walkingtree.in/2012/07/16/badge-text-in-extjs-4-1/
     * based on: https://github.com/vondervick/ext/tree/master/badge_button
     */


    Ext.define('Ext.ux.button.BadgeButton', {
        
    extend'Ext.button.Button',
        
    alias'widget.badgebutton',


        
    config: {
            
    badgeText''
        
    },


        
    renderTpl: ['<span id="{id}-btnWrap" class="{baseCls}-wrap',
     
    '<tpl if="splitCls"> {splitCls}</tpl>',
     
    '{childElCls}" unselectable="on">'
    '<span id="{id}-btnEl" class="{baseCls}-button {baseCls}-hasBadge">'
    '<span id="{id}-btnInnerEl" class="{baseCls}-inner {innerCls}'
    '{childElCls}" unselectable="on">'
    '{text}'
    '</span>',
     
    '<tpl if="badgeText"><span id="{id}-btnBadge" class="{baseCls}-badgeCls" reference="badgeElement" unselectable="on">{badgeText}</span></tpl>'
    '<span role="img" id="{id}-btnIconEl" class="{baseCls}-icon-el {iconCls}''{childElCls} {glyphCls}" unselectable="on" style="',
     
    '<tpl if="iconUrl">background-image:url({iconUrl});</tpl>'
    '<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
     
    '<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl"> </tpl>'
    '</span>',
     
    '</span>'
    '</span>',
        
    // if "closable" (tab) add a close element icon
        
    '<tpl if="closable">',
     
    '<span id="{id}-closeEl" class="{baseCls}-close-btn" title="{closeText}" tabIndex="0"></span>'
    '</tpl>'],


        
    childEls: ['btnBadge'],


        
    initComponent: function(config) {
            
    Ext.apply(this.configconfig);
            
    this.callParent(arguments);


            
    this.addEvents(
            
    /**
             * @event badgetextchange
             * Fired when the button's badge text is changed by the {@link #setBadgeText} method.
             * @param {Ext.ux.container.BadgeButton} this
             * @param {String} oldText
             * @param {String} newText
             */
    'badgetextchange');
        },


        
    getTemplateArgs: function() {
            var 
    me this,
                
    glyph me.glyph,
                
    glyphFontFamily Ext._glyphFontFamily,
                
    glyphParts;


            if (
    typeof glyph === 'string') {
                
    glyphParts glyph.split('@');
                
    glyph glyphParts[0];
                
    glyphFontFamily glyphParts[1];
            }


            return {
                
    innerClsme.getInnerCls(),
                
    splitClsme.getSplitCls(),
                
    iconUrlme.icon,
                
    iconClsme.iconCls,
                
    glyphglyph,
                
    glyphClsglyph me.glyphCls '',
                
    glyphFontFamilyglyphFontFamily,
                
    textme.text || ' ',
                
    badgeTextme.badgeText || undefined
            
    };
        },




        
    /**
         * Sets this Button's Badge text
         * @param {String} text The button badge text
         * @return {Ext.ux.container.BadgeButton} this
         */
        
    setBadgeText: function(text) {
            
    text text || '';
            var 
    me this,
                
    oldBadgeText me.badgeText || '';


            if (
    text != oldBadgeText) {


                if (
    Ext.isEmpty(text)) {
                    
    me.btnBadge.addCls('hide-badge');
                } else {
                    
    me.btnBadge.removeCls('hide-badge');
                }


                
    me.badgeText text;
                if (
    me.rendered) {
                    
    me.btnBadge.update(text || '');
                    
    //me.setComponentCls();
                    
    if (Ext.isStrict && Ext.isIE8) {
                        
    // weird repaint issue causes it to not resize
                        
    me.el.repaint();
                    }
                    
    //me.updateLayout();
                
    }
                
    me.fireEvent('badgetextchange'meoldBadgeTexttext);
            }
            return 
    me;
        }
    }); 
    CSS:
    PHP Code:
    .x-btn-hasBadge {    
    overflowvisible;
    }
    .
    x-btn-badgeCls {
        
    font-size10px;
        
    positionabsolute;
        
    top: -10px;
        
    right2px;
        
    displayinline-block;
        
    widthauto;
        
    font-weightbold;
        
    colorwhite;
        
    text-shadowrgba(0000.5-0.08em 0;
        -
    webkit-border-radius3px;
        
    border-radius3px;
        
    padding0px;
        
    padding1px 2px;
        
    background-imagenone;
        
    background-color#C00;
       
    background-image: -webkit-gradient(linear500%, 50100%, color-stop(0%, #ff1a1a), color-stop(3%, #e60000), color-stop(100%, #b30000));
        
    background-image: -webkit-linear-gradient(top#ff1a1a,#e60000 3%,#b30000);
        
    background-imagelinear-gradient(top#ff1a1a,#e60000 3%,#b30000);    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 0.1em 0.1em;
        
    box-shadowrgba(0000.30 0.1em 0.1em;
        
    z-index12;
    }
    .
    has-badge {
        
    overflowvisible !important;
    }
    .
    hide-badge {
        
    displaynone !important;

    This is still work in progress so all bug reports are welcome.
    Tested on ExtJS 4.2.1.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,935
    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


    Thank you for the contribution.

  3. #3
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    +1
    Vador

  4. #4
    Sencha Premium Member Salakar's Avatar
    Join Date
    Aug 2013
    Location
    Nottingham
    Posts
    90
    Vote Rating
    4
    Salakar is on a distinguished road

      0  

    Default


    Looks good

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Location
    Orlando, Fl
    Posts
    8
    Vote Rating
    0
    sobbayi is on a distinguished road

      0  

    Default


    Pretty neat, thanks

  6. #6
    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


    Thanks for comments, hope this will be helpful.
    As I wrote in my first post this is my first User Extension, probably it could be done better, so any bugs reports, suggestions on improvements are welcome

  7. #7
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    9
    Vote Rating
    0
    winitsw is on a distinguished road

      0  

    Default


    Very nice control, but I have one problem with it.When you create the badge button without badge (don't supply the badgeText) and then in some handler try to set the badgeText using the setBadgeText function, an errror will occur because the btnBadge var is null.

  8. #8
    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


    Quote Originally Posted by winitsw View Post
    Very nice control, but I have one problem with it.When you create the badge button without badge (don't supply the badgeText) and then in some handler try to set the badgeText using the setBadgeText function, an errror will occur because the btnBadge var is null.
    I did quick fix for that, here is the result:


    basically I'm rendering span for badge and I'm hiding it when text is empty.
    There probably is better way of doing this, but I'm still a beginner, so maybe someone more advanced could look at this

  9. #9
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    435
    Vote Rating
    6
    wemerson.januario is on a distinguished road

      0  

    Default nice

    nice


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

  10. #10
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    9
    Vote Rating
    0
    winitsw is on a distinguished road

      0  

    Default


    Thanks for the quick reply and fix.