How To: Make Tabs Reload and Evaluate Scripts using ExtJS

On 05.15.09, In AJAX, Ext JS, Featured, JavaScript, Programming, by
Tags: , , ,
Post Pic

Introduction:

When I was working on Ext JS Tab Panels, I was strucked at one position like, let me explain you the scenario: I am using ‘autoLoad‘ for loading an HTML page using AJAX concept, in one of my html page I have used some JavaScript, which needs to be initialized on tab activate (this is my requirement). For evaluating I have used ‘scripts:ture‘, I thought this will do my Job, when I executed respective page, it has worked fine for the first time, when I navigate to other tabs and came back to the tab panel which has got ‘scripts:ture‘ the respective JavaScript code is not initializing. This has disappointed me a lot since I need that functionality. For this to achieve we have to use refresh() method through getUpdater().

In Two ways we can achieve this one, that is purely depending on your requirement.

  • First method would be, add a ‘listener’ and to the respective ‘tabchange’ event write a function which does your job.
  • Second method would be, adding a ‘listener’ to the respective tab panel

Live Preview | Download

HTML Code

1
2
3

<h1>How To: Make Tabs Reload and Evaluate Scripts</h1>

<div id="renderTabs"></div>

First Method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    // First Method
    var ajaxtabPanels = new Ext.TabPanel({
        renderTo: 'renderTabs',
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
                listeners: {
                tabchange: function(tabPanel,newTab){
                         var thisObj = newTab.getUpdater();
                         if(thisObj) thisObj.refresh();
                  }
            },
        items:[{
                title: 'Ajax Tab 1 - Simple Page without JS Code',
                autoLoad:'ajaxtab1.html' // Simple Page without JavaScript Code
            },{
                title: 'Ajax Tab 2 - Page with JavaScript Code',
                autoLoad:{url: 'ajaxtab2.html', scripts:true} //Simple Page with JavaScript Code
            },{
                title: 'Ajax Tab 3 Disabled',
                disabled:true
            }
        ]
    });

Second Method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

     // Second Method
    var ajaxtabPanels = new Ext.TabPanel({
        renderTo: 'renderTabs',
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                title: 'Ajax Tab 1 - Simple Page without JS Code',
                autoLoad:'ajaxtab1.html' // Simple Page without JavaScript Code
            },{
                title: 'Ajax Tab 2 - Page with JavaScript Code',
                autoLoad:{url: 'ajaxtab2.html', scripts:true}, //Simple Page with JavaScript Code
                                listeners:{
                                        activate : function(tabpanel){
                                                tabpanel.getUpdater().refresh();
                                        }
                                }
            },{
                title: 'Ajax Tab 3 Disabled',
                disabled:true
            }
        ]
    });

Live Preview | Download

This respective code has helped me a lot, for this I would like to thank ExtJS Team for giving me a valuable answer and for helping me as well.

Related Entries...

admin

Visit Authors Website  |  All Articles From This Author

You Might Like:

Advertisement

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

One Response

extuser
05.15.09

I was trying to use this with extjs4 but the api’s have changed in extjs4. Any idea how this works in extjs4. I just tried setting the loader config for scripts and renderer but it doesn’t seem to work

Leave Your Response