PDA

View Full Version : Can't seem to dynamically load a panel with a new url



gkaplan
25 May 2010, 3:07 PM
I have a very typical looking page, viewport with action links on the west and a collection of tabs on the east. One of the tabs has an id of "home". When one of the link is clicked in the action panel, it needs to cause the home tab to show a different page.

The best I can get to work is the "Loading..." message to show up, but it never completes. Because the loading message shows up, I know I have correctly obtained the right tab, but I can't get it to refresh the page as desired.

Here's what I have:

Ext.onReady(function(){

var content = new Ext.TabPanel({
id: 'tab-panel',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
defaults: {autoScroll:true, closable:false},
items: [
{
id: 'home',
padding: 10,
title: 'Home',
iconCls: 'icon-home',
closable: true
},{
contentEl: 'center1',
id: 'report-tab',
iconCls: 'icon-pdf-small',
title: 'Report'
} ]
});

...

var showDocument = function(targetTab,url){
var myPanel = content.items.get(targetTab);
myPanel.load({
url: 'http://www.ibm.com',
timeout: 5
});
myPanel.show();
};

...
Ext.get('show-links').on('click',function(){showDocument('home','http://www.ibm.com')});
...
}); //end onReady

Anybody have any idea how to accomplish what I want?

Thanks,
<Gerry />

mankz
25 May 2010, 9:37 PM
The code you included will try to make an Ajax request to another domain, which is forbidden. Try loading something from your own localhost and it should work!

Condor
25 May 2010, 10:43 PM
The only way to include a page from a different domain is to use an IFRAME, e.g.

{
title: 'My Tab',
bodyCfg: {tag: 'iframe', frameborder: '0', src: 'http://www.ibm.com'}
}

gkaplan
26 May 2010, 8:06 PM
Your suggestions all worked. Also, I had to take out the enveloping HTML elements (i.e. <HTML>) and just include content.

imb1
5 Mar 2011, 1:36 PM
The only way to include a page from a different domain is to use an IFRAME, e.g.

{
title: 'My Tab',
bodyCfg: {tag: 'iframe', frameborder: '0', src: 'http://www.ibm.com'}
}

--------------------------

I assume till latest release of Ext, its not possible to load a different domain's page to an Ext Panel and have the js inside the different domain page execute like we can do for same domain [script:true]

If we have to use an IFRAME instead, can we have the page inside the iframe use the containing page's [the one which host the iframe] already imported/downloaded ext js lib files, instead of including [fetching*] them again.

Example Use case/Scenario:
----------------------
1. Subdomain "sub1.domain.com" has a page built with Ext that contains a Tree on the left [site links] with and a CONTAINER on the right to load content based on node click.

2. Each root node click on the left menu/links TREE, has to load content from a sister subdomain to the right container, preferrably through an AJX call or apparantly like it [without a full refresh of the whole page] e.g. from "sub2.domain.com","sub3.domain.com". The pages that gets loaded are built with ExtJS.

Can we have a way where "sub2.domain.com","sub3.domain.com" pages leverage the Ext lib files and other common files already loaded in parent/containing page from "sub1.domain.com"

-------

If not, will it cost anything to latency or bandwidth if these files are included in all subdomain pages [the browser would not probably re-download if all these common files are served from same url when included through <script> tag e.g. <script src="http://static.domain.com/js/ext.js">

----

Would highly appreciate some generous comments, enligtening [i am almost a novice to UI/JS/Browser tech.s ]

Thanks much