Question

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 becomes 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.

Answer 1

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.