How To: Make Tabs Reload and Evaluate Scripts using ExtJS

May 15, 2009

How To: Make Tabs Reload and Evaluate Scripts using ExtJS

Categories: AJAX, Ext JS, Featured, JavaScript, Programming

Tags: AJAX, Ext JS, JavaScript, Programming

Written By: admin

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>
<!-- container for the existing markup tabs -->
<div id="renderTabs"></div>

First Method:

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

	// 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
            }
        ]
    });