PDA

View Full Version : Opening external page into a panel



alex9311
27 Feb 2013, 4:58 PM
I have two separate applications and I would like to integrate them. I'm trying to use a button click event to load a url where my second application is into a basic panel. I found this post on the subject:
http://www.learnsomethings.com/2010/08/23/loading-an-external-page-into-an-extjs-panel-and-allowing-the-page-to-execute-script/

but I cant get it to work. I don't see a "autoLoad" config option or "load" method in the sencha panel documentation..

I've tried a different method using jquery:

var div = document.getElementById('thepanel');
div.innerHTML = "<iframe src=\"http://www.yahoo.com\"></iframe>";


where I have a panel with id 'thepanel' and I want to load the yahoo home page in it when I run this code. I can see the yahoo div added to the thepanel div using firebug but nothing shows up.

Is this even possible?

scottmartin
27 Feb 2013, 8:02 PM
Some sites do not permit display in frame (yahoo,...) see console for error



Ext.create('Ext.panel.Panel', {
title: 'Hello',
height: 400,
width: 400,
html: '<iframe id="eventsIFrame" width="100%" height="100%" src="http://www.sencha.com"></iframe>',
renderTo: Ext.getBody()
});

alex9311
28 Feb 2013, 9:28 AM
Okay I've gotten a bit farther now, thank you.Here is my function (called from a button), "thepanel" is my blank panel. I'm using a relative path to access another one of my ext projects.


function(button){
var div = document.getElementById('thepanel');
div.innerHTML = "<iframe src=\"../../../project2/?&type=grades&gradeitem1=40691&\"></iframe>";
}

I can see the GET request in firebug's console when I run the function and all my second project code/data all shows up in an iframe when I look a the HTML in firebug but nothing new shows up in the browser. Any ideas of what could be keeping my iframe's contents from showing

scottmartin
4 Mar 2013, 6:41 AM
See if works using http://www.mydomain.com/project2/ ... instead of a relative drive path.

Sctt.

alex9311
5 Mar 2013, 11:49 AM
I ended up using and iframe plugin I found here:

http://www.sencha.com/forum/showthread.php?110311-iframePanel

Using that plugin I could write the function:

handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
console.log(rec.get('url'));
var frame = Ext.getCmp('thepanel');
frame.setSource(rec.get('url'),"loading");
}

Which loads a grid row's url through an action column in an adjacent iframe panel

Thank you!