CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2sencha-touch-2.1
Jini D
Jini D

Reputation: 23

How to update badgeText in Sencha Touch (Ext.Container)

Currently I'm a newbie in Sencha and I want to update the badgeText in Sencha Touch from the store count in Ext.Container.

Please see my code below for your reference:

 Ext.define('XX.view.Menu',{
    extend: 'Ext.Container',
    xtype: 'menu',
    config: {
        cls: 'mainmenu',
        docked: 'left',
        top: 0,
        left: 0,
        bottom: 0,
        zIndex: 0,
        width: 266,
        padding: '0 0 0 0',
        open: false,
        scrollable: 'vertical',
        defaultType: 'button',
        defaults: {
            textAlign: 'left'
        },
        scrollable: {
            indicators: false
        },
        items: [{
            text: 'Home',
            ui: 'mainmenu',
            iconCls: 'home',
            itemId: 'home'
        },{
            text: 'Contact Us',
            ui: 'mainmenu',
            iconCls: 'form',
            itemId: 'contactus'
        },{
            text : 'Notifications',
            ui: 'mainmenu',
            badgeText: '0',
            iconCls: 'form',
            itemId: 'notifications'
        }]
    },

    setParent: function(parent) {
        this.callParent(arguments);

        this.maskCmp = parent.add({
            xtype   : 'component',
            cls     : 'mainmenu-mask',
            top     : 0,
            zIndex  : 5000,
            hidden  : true,
            width   : 9999,
            left    : this.getWidth(),
            bottom  : 0
        });

        this.maskCmp.element.on({
            scope   : this,
            touchend: 'onMaskRelease'
        });

    }




});

EDIT: This one is working as per Sujata's - Tap Event

     config: {
    refs: {
        notificationsMenuItem: 'menu #notifications'
    },
    control: {

        notificationsMenuItem: {
            tap: 'notificationsItemTap'
        }
    }
}

notificationsItemTap: function(button){
    button.setBadgeText('1');
}

EDIT: UPDATE-02 - Working Modified Code as per Sujata's latest reply:

  config: {
    refs: {
        notificationsMenuItem: 'menu #notifications'
    }
},
    control: {
        main: {
            initialize: 'mainInitialize',
            navigationMode: 'switchToNavigation'
        }
    },
    mainInitialize: function() {
    this.getNotificationsMenuItem().setBadgeText('48');
}

Upvotes: 0

Views: 861

Answers (1)

Sujata Chanda
Sujata Chanda

Reputation: 3395

You can set it with the setBadgeText method. Add 'name: "notifications"' field in your button view. In the controller get the refs of the button like this:

refs: {
   notificationsBtn : 'button[name="notifications"]'  
}

Get the button tap event :

control: {
   notificationsBtn : {
      tap : function(btn) {
           btn.setBadgeText('1');  // Get your store data and set
      }
 }

Edit:-

To get the badge text on menu load you can use the initialize method of the view, like this:-

    refs: {
      menu: 'menu',
      notificationsBtn : 'button[name="notifications"]'  
    },
    control: {
       menu : {
         initialize :  function(){
          this.getNotificationsBtn().setBadgeText('1');
         }
     }
  }

Upvotes: 0

Related Questions