Load html data with AJAX in Sencha touch when panel is shown

I have a TabPanel with a Tabbar and four panels inside. I want to load the HTML content for the fourth panel with an AJAX call when the panel becomes visible.

The AJAX function fetches the data from the server and places it inside the panel, which uses the panel update function. The problem is how to call this function when the panel become开发者_如何学运维s visible. A simplified version is:

Pages.Contact = new Ext.Panel({

    title: 'Contact',
    html: 'test data',
    iconCls: 'user',
    cls: 'cHome',

    activate: function () {
        Pages.Contact.update("my ajax data");
    }

});

When I go to my panel the body content is not affected. Does anyone know what goes wrong here? I've already tried to replace activate with render and show.

---

To add event's listeners you need to do

    listeners: {
                activate: function(){
                 console.log('activate fired');
                } 
   },

But that's not the event you want to listen. It's better to listen for beforecardswitch on the TapPanel object, example:

    listeners: {
                beforecardswitch:function(newCard, oldCard, index, anim){
                  if(index == 3){
                     //loadJson and update card.
                      // you may want to use this also 
                      newCard.setLoading(true);
                      //and after the json request has finished set it to false.
                    }             
                }
    },

---

The solution was to use:

beforecardswitch:function(object, newCard, oldCard, index, anim) {

As shown by Ilya139 by with the object parameter as first parameter.

Then the index variable returns the correct cardnumber.