PDA

View Full Version : "Load" event of AJAX based tab panels?



BulletzBill
6 Jun 2011, 11:42 AM
Is there any way to add an event listener to the load/update event of a ajax based tabpanel in 3.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?

skirtle
6 Jun 2011, 9:01 PM
How are you invoking the updater to load content? Is myTabs your tabpanel? Are you updating the tabpanel or the child panels?

BulletzBill
7 Jun 2011, 5:48 AM
How are you invoking the updater to load content? Is myTabs your tabpanel? Are you updating the tabpanel or the child panels?

Here is my full implementation of the tabpanel:

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');
});

So I am loading the TabPanel's child panels via ajax using their autoLoad config object. And event that is the completion of the remote loading and injection of that content into the child panel is what I am attempting to capture.

BulletzBill
7 Jun 2011, 8:40 AM
Something I just tried, i gave an id to one of the autoloaded tab's config object and in chrome's console I did:

Ext.util.Observable.capture(Ext.getCmp('tab_1', function(){ console.log(arguments); })
And then I opened that tab and the following events were logged in the console:

["beforeshow",
Ext.apply.extend.K
]
["show",
Ext.apply.extend.K
]
["beforerender",
Ext.apply.extend.K
]
["render",
Ext.apply.extend.K
]
["titlechange",
Ext.apply.extend.K
, "Notes"]
["bodyresize",
Ext.apply.extend.K
, 1191, "auto"]
["resize",
Ext.apply.extend.K
, undefined, "auto", undefined, undefined]
["afterrender",
Ext.apply.extend.K
]
["afterlayout",
Ext.apply.extend.K
,
Ext.apply.extend.K
]
["activate",
Ext.apply.extend.K
]
ALL of which were fired before the actual tab's content was injected into its body. So it seems like the "finished loading" event is not tied to the child panel itself. Where it is bound though, I have no idea.

BulletzBill
7 Jun 2011, 9:47 AM
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.