Badge Text in ExtJS 4.1


Problem Statement

In Sencha Touch you have badgeText configuration, which allows you to setup and update badge information on a button. Following image shows a sample usage of badge text on a button

Following is the sample code in Sencha Touch to achieve above functionality:
Ext.create('Ext.Container', {
fullscreen: true,
padding: 10,
items: {
xtype: 'button',
width : 120,
text: 'Messages',
badgeText : 2,
handler: function() {
var badgeTextVal = this.getBadgeText();
if ( Ext.isEmpty( badgeTextVal ) ) {
badgeTextVal = 0;
}
badgeTextVal = badgeTextVal + 1;
this.setBadgeText( badgeTextVal );
}
}
});

While I have taken an example of setting badge text on click on the button, you can have your own logic to set the badge text of a given button. This functionality looks really good. Unfortunately, it is not available in ExtJS.

How do we do this in ExtJS 4.1?

The first thing you need to do is extend button class to create a new component (For example I created Pandora.view.BadgeButton) and add a new configuration called badgeText and define a new method called setBadgeText:

Ext.define('Pandora.view.BadgeButton',{
extend:'Ext.button.Button',
alias:'widget.badgebutton',

config:{
badgeText:null,
renderTpl : [

]
},
childEls:[
‘btnbadge’
],
constructor:function( config ){
var me = this;
console.log( me.config );
Ext.apply(this.config,config);
this.callParent( arguments );
console.log( me.config );
},

getTemplateArgs: function() {
var me = this,
persistentPadding = me.getPersistentPadding(),
innerSpanStyle = ”;

if (Math.max.apply(Math, persistentPadding) > 0) {
innerSpanStyle = ‘margin:’ + Ext.Array.map(persistentPadding, function(pad) {
return -pad + ‘px’;
}).join(‘ ‘);
}

return {
href : me.getHref(),
disabled : me.disabled,
hrefTarget: me.hrefTarget,
type : me.type,
btnCls : me.getBtnCls() +’ has-badge’,
splitCls : me.getSplitCls(),
iconUrl : me.icon,
iconCls : me.iconCls,
text : me.text || ‘ ‘,
badgeText:me.badgeText || undefined,
tabIndex : me.tabIndex,
innerSpanStyle: innerSpanStyle
};
},

setBadgeText:function(text) {
var me = this;
if( Ext.isEmpty( text)){
text = undefined;
me.btnbadge.addCls(‘hide-badge’);
}else{
me.btnbadge.removeCls(‘hide-badge’);
}
me.badgeText = text;
if (me.rendered) {
me.btnbadge.update(text );
}
return me;
}

});

Also, you need to define a config called renderTpl and a method getTemplateArgs, which returns an object which provides substitution parameters for the XTemplate used to create this Button’s DOM structure.

Now you need to define CSS that you have used in your XTemplate definitions. Following piece of code shows the required CSS:

.x-btn-badgeCls{
overflow: visible;
top: -0.3em;
font-family: tahoma,arial,verdana,sans-serif;

-webkit-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: .8 em;
border-radius: .8 em;
padding: .5 em;
z-index: 12;
text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.1em 0.1em;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.1em 0.1em;
font-weight:bold;
color: white;
border: 1px solid blue;
position: absolute;
width: auto;
min-width: 1em;
line-height: 1.2em;
font-size: 6pt;
right:-5px;

max-width: 95%;
background-image: none;
background-color: #C00;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff1a1a), color-stop(3%, #e60000), color-stop(100%, #b30000));
background-image: -webkit-linear-gradient(top, #ff1a1a,#e60000 3%,#b30000);
background-image: linear-gradient(top, #ff1a1a,#e60000 3%,#b30000);
display: inline-block;
/* padding:0.2em; */

}
.x-tab-badgeCls{
overflow: visible;
top: -.6em;
font-family: tahoma,arial,verdana,sans-serif;
-webkit-background-clip: padding;
background-clip: padding-box;
/* -webkit-border-radius: 0.3em; */
border-radius: 2em;
margin-right: -1.15em;
z-index: 12;
text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.1em 0.1em;
box-shadow: rgba(0, 0, 0, 0.5) 0 0.1em 0.1em;
color: white;
border: 2px solid black;
position: absolute;
width: auto;
min-width: 1em;
line-height: 1.2em;
font-size: 6pt;
right: -0.5px;
max-width: 95%;
background-image: none;
background-color: #C00;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff1a1a), color-stop(3%, #e60000), color-stop(100%, #b30000));
background-image: -webkit-linear-gradient(top, #ff1a1a,#e60000 3%,#b30000);
background-image: linear-gradient(top, #ff1a1a,#e60000 3%,#b30000);
display: inline-block;
padding:0.2em;
word-break: break-word;
white-space: normal;
font-weight:bold;
}
.has-badge{
height:22px ;
line-height:22px;
overflow: visible !important;
}

.test{
background-image:’3.png’;
}

.hide-badge{
display:none !important;
}

/*.x-frame-mc.x-btn-mc{*/
/*overflow:visible !important;*/
/*}*/
/**/
.x-frame-mc .x-btn-mc{
overflow:visible! important;
}

.has-badge .x-tab-inner{

background-color: transparent;
background-repeat: no-repeat;
background-position: 0 -2px;
display: block;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 0.8em;
}

.x-badge-bar .x-tab-bar-body ,.x-badge-bar .x-tab-bar-body .x-box-inner{
overflow:visible !important;
}

.x-btn .x-btn-center .x-btn-icon{
margin-right:10px !important;
}
.has-badge .x-btn-inner,.has-badge .x-btn-icon{
padding-right:20px;
}

With these changes in place, you are ready to use BadgeButton class to see the badge text as seen in the Sencha Touch application. For the sake of example – I have modified (rather simplified the Pandora example that ships with Sencha ExtJS). Following is the relevant code:
Ext.define('Pandora.view.SongControls', {
extend: 'Ext.Container',
alias: 'widget.songcontrols',
height: 70,
requires : ['Pandora.view.BadgeButton'],

initComponent: function() {
this.layout = {
type: ‘vbox’,
align: ‘center’,
pack: ‘center’
};

this.items = [{
xtype: ‘container’,
defaultType: ‘button’,
height: 30,
width: 300,
layout: {
type: ‘hbox’,
align: ‘center’,
pack: ‘center’
},
items: [{
text: ‘Vote Down’,
action: ‘vote-down’
}, {
text: ‘Vote Up’,
action: ‘vote-up’,
xtype : ‘badgebutton’,
badgeText : ‘1’,
handler : function() {
var badgeTextVal = this.badgeText;
if ( Ext.isEmpty( badgeTextVal ) ) {
badgeTextVal = 0;
}
badgeTextVal = parseInt(badgeTextVal) + 1;
this.setBadgeText( badgeTextVal );
}

}, {
text: ‘Pause’,
action: ‘pause’
}, {
text: ‘Skip’,
action: ‘skip’
}]
}];

this.callParent();
}
});

Once you launch your application and click on the button with badgeText, you can see the badgeText as shown in below image:

Summary

The purpose of this article was to show how badgeText feature can be made available to the ExtJS users. I hope you found this article helpful. In case you need any professional support on Sencha products like ExtJS and Sencha Touch do visit our website and get in touch with us.

Reference

http://docs.sencha.com/touch/2-0/#!/video/tabs-toolbars

Tagged with: ,
Posted in Sencha ExtJS
16 comments on “Badge Text in ExtJS 4.1
  1. Anagha says:

    Hi,
    I want to use this plugin using Sencha Architect.
    How to add this plugin in architect?

  2. tdikarim says:

    Hi,

    Thanks for tihis plugins. It’s great.

    How can i add an on click event for launch a function ?

    I try this but nothing happens
    var btn_refresh_NouvelleCommande = Ext.create(‘Pandora.view.SongControls’);
    btn_refresh_NouvelleCommande.on(‘click’, function(e) {
    myStore.reload();;
    }, this);

    Thanks for your help
    Karim

  3. JC says:

    sorry here’s my complete example https://github.com/vondervick/ext/tree/master/badge_button
    thx to Walking Tree.

  4. JC says:

    i fix it! this code has errors on the renderTpl use this for better performance:

    renderTpl : [
    ‘<em id="{id}-btnWrap" class=”{splitCls}”>’,
    ‘ ‘,
    ‘ ‘,
    ‘ ‘,
    ‘ {badgeText}’,
    ‘ ‘,
    ‘ ‘,
    ‘ ‘,
    ‘ <button id="{id}-btnEl" type="{type}" class="{baseCls}" hidefocus="true" role="button" autocomplete="off" tabIndex=”{tabIndex}” disabled=”disabled” >’,

    ‘ {text}’,
    ‘ <span id="{id}-btnIconEl" class="{baseCls}-icon {iconCls}" style=”background-image:url({iconUrl})”>’,
    ‘ ‘,
    ‘‘,
    ”,
    ‘,

    ]

    in this code i put my badgeText span outside the button works better that way, the rest of the code is working.

    Now, for using this on Sencha Architect 2.1 / extjs.4.1.1

    1. create a resource file outside, named whatever you want.
    2. include the file inside SA. using resource.
    3. create a button, overrite it! and set the xtype to badgebutton
    4. set te badgeText
    5. enjoy!

  5. JC says:

    Hi how can i make it work on sencha architect 2.1 i include a file badge.js as a resource, then create my button xtype badgebutton and give me this error Cannot call method ‘setStyle’ of null

  6. Karim says:

    Ok
    I have found it !:
    // creates instance of My.computer.NoteBook Class
    var mybutton = Ext.create(‘Pandora.view.SongControls’);
    …..
    items: mybutton

    • JC says:

      i couldnt make it work any leads ? it give an error Uncaught TypeError: Cannot read property ‘initialized’ of undefined

  7. Karim says:

    Hi,

    I have begin with extjs4.
    I try to use your extension, but I do something wrong.
    I have defined the badge button and add the css code. then i have defined the SongControls.
    Now i try to add the SongControls type on a bbar with no success.
    {
    xtype: ‘songcontrols’
    },

    Do you have a sample code?

    Thanks

  8. karim says:

    Hi,

    great job !!
    Does it work with extjs 3.3.1 ?

    Thanks

  9. Walking Tree says:

    Ajit, thank you for your attention. Yes we can customize look-n-feel of the badge by playing with the CSS defined inside x-btn-badgeCls class. We don’t have any direct API to achieve this.

    Following link contains few example CSS for different type of shapes:
    http://www.css3shapes.com/

    In case you want to update update the text / value you can make use of setBadgeText method of the BadgeButton class. Why do you need a callback?

  10. Ajit Kumar says:

    Thanks a lot for the extension!

    is there a way to customize the look-n-feel of the badge (e.g. shape should be a star, it should be green/yellow in color, etc.)?
    Also, can I associate a callback that shall be used to update the text/value in the badge text, periodically?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: