ExtJS AJAX TabPanel tab load event?

Question

Is there any way to add an event listener to the load/update event of a ajax based tabpanel in ExtJS v3.3.1? I need an event that fires after the tab content is retrieved and fully rendered, not right after the tab is selected/activated and the loading spinner is displayed.

I thought I would be able to add this event on the Ext.Updater object returned by the tabpanel's getUpdater() method, i.e.:

myTabs.getUpdater().on('update', function()
{
    console.log('tab loaded');
});

But that does not seem to work. Any ideas?

Edit: Here's my full implementation to make it easier to see what I'm trying to do:

var myTabs = new Ext.TabPanel( 
{ 
    id : 'rec_tabs', 
    activeTab : 0,    
    enableTabScroll : true, 
    padding : 5, 
    autoWidth : false, 
    autoHeight : true, 
    border : false, 
    plain : true, 
    defaults : { autoHeight: true }, 
    items : 
    [ 
        { title : 'Tab #1',  autoLoad : { url : 'tab1_content.php', scripts : true } }, 
        ... 
    ] 
}); 

myTabs.render('tab_div'); 

myTabs.getUpdater().on('update', function() 
{ 
    console.log('tab loaded'); 
});

Bill Dami Bill Dami · Accepted Answer · 2011-06-07T17:47:18

Finally figured it out. I hadn't realized that the properties of the "autoLoad" config object for each item of the TabPanel are actually just used as parameters for the Ext.Updater.update() method. So all I had to do was is along with the "url" and "scripts" parameters, is define the "callback" property as a function to be executed when the tab content is finished loading into its body, and its good to go.

ExtJS AJAX TabPanel tab load event?

2 Answers