Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Thread: Ext.ux.button.BadgeButton

  1. #1
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    261
    Vote Rating
    79
      1  

    Default 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
    9,388
    Vote Rating
    499
      0  

    Default

    Thank you for the contribution.

  3. #3
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    211
    Vote Rating
    0
      0  

    Default

    +1
    Vador

  4. #4
    Sencha Premium Member Salakar's Avatar
    Join Date
    Aug 2013
    Location
    Nottingham
    Posts
    90
    Vote Rating
    4
      0  

    Default

    Looks good

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Location
    Orlando, Fl
    Posts
    8
    Vote Rating
    0
      0  

    Default

    Pretty neat, thanks

  6. #6
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    261
    Vote Rating
    79
      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
      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
    261
    Vote Rating
    79
      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 Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goinia - GO, Brazil
    Posts
    634
    Vote Rating
    49
      0  

    Default nice

    Thanks for sharing!
    Wemerson Januario
    Site/Blog: http://wemersonjanuario.com.brFrom: Goinia, GO, Brazil
    Consulting Training and Web Development

  10. #10
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Thanks for the quick reply and fix.

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •