Results 1 to 5 of 5

Thread: "Load" event of AJAX based tab panels?

  1. #1
    Sencha User BulletzBill's Avatar
    Join Date
    Mar 2010
    Location
    New York
    Posts
    138

    Default "Load" event of AJAX based tab panels?

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

    Code:
    myTabs.getUpdater().on('update', function()
    {
        console.log('tab loaded');
    });
    But that does not seem to work. Any ideas?

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791

    Default

    How are you invoking the updater to load content? Is myTabs your tabpanel? Are you updating the tabpanel or the child panels?

  3. #3
    Sencha User BulletzBill's Avatar
    Join Date
    Mar 2010
    Location
    New York
    Posts
    138

    Default

    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:
    PHP Code:
    var myTabs = new Ext.TabPanel(
    {
        
    id 'rec_tabs',
        
    activeTab 0,   
        
    enableTabScroll true,
        
    padding 5,
        
    autoWidth false,
        
    autoHeight true,
        
    border false,
        
    plain true,
        
    defaults : { autoHeighttrue },
        
    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.

  4. #4
    Sencha User BulletzBill's Avatar
    Join Date
    Mar 2010
    Location
    New York
    Posts
    138

    Default

    Something I just tried, i gave an id to one of the autoloaded tab's config object and in chrome's console I did:
    PHP Code:
    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:
    PHP Code:
    ["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"undefinedundefined]
    [
    "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.

  5. #5
    Sencha User BulletzBill's Avatar
    Join Date
    Mar 2010
    Location
    New York
    Posts
    138

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •