Advertisement

Learn Photoshop, Flash, Adobe AIR, ExtJS, jQuery, Ajax, Dojo, HTML, CSS, JavaScript, XML, Accessibility, Database, DWR, Gears, GWT, Java, JSON, MooTools, Office, Perl, PHP, Programming, Prototype, Scriptaculous and more, Want to explore your choice of videos from all over world at once place! then what are you waiting for, just click, explore and learn.
And if you are a sports person, enjoy videos of Sports - below are the latest sports videos which you have ever seen before.

How To: Make Tabs Reload and Evaluate Scripts using ExtJS

Categories: AJAX, Ext JS, Featured, JavaScript, Programming
Tags: , , ,
Written By: admin

Advertisement



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:

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.

Articles which you would like to read:

Advertisement



Leave a Reply





Featured & Popular Articles

Online Sponsor