Question

What I am trying to do is is get the information I have in my ajax request as the badgetext number

Here is where I am trying to do it. This seems simple, but I cant figure it out.

    Ext.Ajax.request({
      url: '../lib/messages.php',
      success: function(response, opts) {
      var badge_number = Ext.decode(response.responseText);
      console.dir(badge_number);
},
    failure: function(response, opts) {
    console.log('server-side failure with status code');
}
});

     var buttonsGroup1 = [{
      text: 'Messages',
      //badge_number variable from ajax request would go here. badgeText: '2',
      handler: tapHandler
    }]; 

Answer 1

Ah ok, I misread the question.

So the most straight forward way to put the badge text on the button is to create a closure.

var button = new Ext.Button({
  text: 'Messages',
  handler: tapHandler});

Ext.Ajax.request({
  ....
  success: function(response, opts){
     button.setBadge(Ext.decode(response.responseText));
  }
  ...
});

This will cause the badge text to be updated when the AJAX call completes. You can then add the object to a Panel or Toolbar after the AJAX request code as you would have before.

If you absolutely have to have the badge text on the button before it is created, you will need to create the button group inside the success function and assign/add it to the appropriate container object.