Creating Ajax tabs in center region of BorderLayout

[booshan]

Gurus,

I am having a tree on the west region. Whenever a node is clicked, I want to create a tab in the central region and it should fetch the contents by XHR. But currently I am doing it thru iframe as below, that makes it to download the js and css files in every iframe. Can someone let me know or point me to the resource how to do the same using Ajax.

I saw some examples using ajax tabs in the docs. But it uses TabPanel, whereas center region is ContentPanel.

Appreciate your help.

Thanks
Booshan

function showNodeDetails( node, event) {
	var id = node.id;
	var title = node.text;
	var href = 'admin.do?action=show&id='+id;
	var newpanel = 'dept-'+id;
	if( !layout.showPanel( newpanel)) {
		var newiframe = new Ext.ContentPanel(newpanel, {
			title: title,
			closable: true,
			autoCreate: true,
			fitToFrame: true
		});
		Ext.DomHelper.append(newpanel, {
			tag: 'iframe',
			src: href,
			width: '100%',
			height: '100%'
		});
		layout.add( 'center', newiframe);
	}
}

[JeffHowden]

The documentation specifies how to load a panel's contents via XHR. You can auto-create the div for the new panel, then use the setUrl() method of the panel to fetch its contents.

[booshan]

Jeff,

Thanks for your quick reply. It worked like a charm. But it is not executing the js script inside the content.

I mean, when the tab is created it retrieves the content via XHR and updates the panel, but the js script in the XHR response doesn't get executed. How can I do that?

Thanks in advance
Booshan

[JeffHowden]

Again, from the docs, the setUrl() method uses the UpdateManager class under the hood. So, check the docs for that class:

http://www.yui-ext.com/deploy/ext-1....teManager.html

The setUrl()'s second argument can be a config object that'll be passed to the update() method of the UpdateManager class. One of the config options tells it to load scripts.

mypanel.setUrl('someurl', { loadScripts: true});

[greyknght1]

addNewCenterTab : function(url, TabTitle){
			   		
			   		// Create a new Div
			   		var newCenterTabId = Ext.id();
					var htmlContent = Ext.getDom('container').innerHTML;
					htmlContent = htmlContent + '<div id=' + newCenterTabId + ' class="x-layout-inactive-content"></div>';
					Ext.getDom('container').innerHTML = htmlContent;
					
					// Update the Layout
					layout.beginUpdate();
					layout.add('center', new Ext.ContentPanel(newCenterTabId, {title: ' ' + TabTitle, closable: true}));
					layout.endUpdate();
					
					// Update the south with the new tab created message
					updateSouth('New Tab ' + TabTitle + ' was created! ');									
					
					// Update the URL for the new tab
					var newTab = Ext.get(newCenterTabId);
					var updater = newTab.getUpdateManager({disableCaching:true, loadScripts: true});					
        			url = url + '?centerTab=' + newCenterTabId;
        			updater.update(url);
        			alert(url);
        			
			   }

I think it is pretty much what you are looking to do. Now I can't say this is the best example, but it works for me!

[cdomigan]

I ended up throwing away this approach, as there are memory leak problems with loading ajax data into tabs. What happens to all the javascript objects created etc. A few people seem to have gone with loading iframes into each tab rather than an ajax response. I'm trying this out at the moment, but it has it's own issues such as the need to reload the Ext library for each instance... good fun

Chris

[JeffHowden]

I ended up throwing away this approach, as there are memory leak problems with loading ajax data into tabs. [...]

I'm sure that's news to a number of people here, myself included. Do you have data to back that up or is it based on something else?

[cdomigan]

I'm sure that's news to a number of people here, myself included. Do you have data to back that up or is it based on something else?

No data, just my own (possibly incorrect) understanding of what might happen. Also this thread was fairly influential in my understanding.

From the thread:

"Using iframes give you more simplicity on destructing containing objects and you will not have any (huge or small) memory leaks while long running applications which has many objects to handle."

If this is incorrect then please let me know - it would be great to be able to use a purely ajax solution, without resorting to iframes.

Edit: I can see my initial statement was misleading. What I meant to say was "I understand there may be potential memory leak problems when loading ajax data into tabs and running attached scripts." I guess my worry is that after a while of loading (and closing) tabs with ajax content, and if the content runs it's own script/s and creates some objects, that when closing the tab these objects are not destroyed and so consequently you leak memory.

[JeffHowden]

Edit: I can see my initial statement was misleading. What I meant to say was "I understand there may be potential memory leak problems when loading ajax data into tabs and running attached scripts." I guess my worry is that after a while of loading (and closing) tabs with ajax content, and if the content runs it's own script/s and creates some objects, that when closing the tab these objects are not destroyed and so consequently you leak memory.

That is definitely understandable, but I'm certain that some extensive testing would be required to determine if that's really an issue or not. As far as I'm aware, there's nothing to indicate that is actually the case (if it were it'd affect pretty much everything that used AJAX to load data/scripts) in every library.

If you have the option, loading data/scripts via AJAX will have far less overhead than creating iframes as the browser must create an entire window and document object models for every iframe you create. I would only use them as a last resort.

[cdomigan]

Thanks Jeff, that makes sense.