View Full Version : load external webpage in new tab?

24 Oct 2007, 7:45 PM

this framework is powerful but difficult (for me).. I can learn php/sql/python/actionscript with some understandings by looking at the scripts.. I am not expert in javascript but i can achive daily web development / simple ajax needs by writing my own js.

I've spend 3 days looking at the examples come with the lib, and failed to hack it, combine those, or even customize those just from the example codes...

anyway, i will keep trying, and hope to use this forum as a last resource to get more hints along the way..

my question is:
How to load an external HTML webpage in a new tab? just 100% like the feed-viewer example which pop-tab and load a webpage in the new tab.. (ya, i failed to extract it from a working sample, totally lost, lol)

given this simple codes from the example tabs-adv.js...

function addTab(){
title: 'New Tab ' + (++index),
iconCls: 'tabs',


new Ext.Button({
text: 'Add Tab',
handler: addTab,
}).render(document.body, 'tabs');


24 Oct 2007, 10:14 PM
Since the content is cross-domain, the only way you can do it is by inserting an iframe into the body of the body of the newly created tab and then set the src of the iframe to your external url.

24 Oct 2007, 11:22 PM
thanks for reply.

I tried to use Ext.get to find the tab and append the iframe in the tab, but doesnt work..

tabs.add({title:'external page',

var externalTab=Ext.get("external_page");
var iframe = Ext.DomHelper.append(externalTab,
{tag: 'iframe', frameBorder: 0, src: 'http://www.msn.com'});

I am using ext2

25 Oct 2007, 7:20 AM
It doesn't work the iframe needs to be attached to the "body" of the tab, not just the DOM node that has the id you passed in. I think what you want is to access it using the getComponent() (http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel&member=getComponent) method. Once you have a handle on the component, use firebug to dump that to the console and inspect it. I believe you'll find a body (http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel&member=body) property that you can use to stuff some HTML into via DomHelper.

From looking at the docs for TabPanel, it becomes clear that all this is the long way to go to solve the problem. Really all you need is to leverage the html (http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel&member=html) config property and give it your DomHelper template.