CODEWITHSUNDEEP
sencha-touch
Bas van Dijk
Bas van Dijk

Reputation: 10713

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

Upvotes: 0

Views: 2524

Answers (2)

Bas van Dijk
Bas van Dijk

Reputation: 10713

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.

Upvotes: 0

ilija139
ilija139

Reputation: 2974

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.
                    }             
                }
    },

Upvotes: 1

Related Questions