PDA

View Full Version : Ext.ux.SimpleIFrame - Simple IFrame component



conorarmstrong
12 Apr 2011, 10:21 AM
Many of the old ExtJS v3.x ux components wont work yet in v4 OR v4.1. The current Ext.ux.ManagedIFrame being one example.

Was doing a project and need a quick iframe for it. The following component solved my needs.

Note, that it doesn't yet fire any events (I didn't need any for my project). You can however set urls, set content, destroy etc.


// vim: sw=2:ts=2:nu:nospell:fdc=2:expandtab
/**
* @class Ext.ux.SimpleIFrame
* @extends Ext.Panel
*
* A simple ExtJS 4 (and v4.1) implementaton of an iframe providing basic functionality.
* For example:
*
* var panel=Ext.create('Ext.ux.SimpleIFrame', {
* border: false,
* src: 'http://localhost'
* });
* panel.setSrc('http://www.sencha.com');
* panel.reset();
* panel.reload();
* panel.getSrc();
* panel.update('<div><b>Some Content....</b></div>');
* panel.destroy();
*
* @author Conor Armstrong
* @copyright (c) 2012 Conor Armstrong
* @date 08 June 2012
* @version 0.3
*
* @license Ext.ux.SimpleIFrame.js is licensed under the terms of the Open Source
* LGPL 3.0 license. Commercial use is permitted to the extent that the
* code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
* target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
*
*/

Ext.require([
'Ext.panel.*'
]);

Ext.define('Ext.ux.SimpleIFrame', {
extend: 'Ext.Panel',
alias: 'widget.simpleiframe',
src: 'about:blank',
loadingText: 'Loading ...',
initComponent: function(){
this.updateHTML();
this.callParent(arguments);
},
updateHTML: function() {
this.html='<iframe id="iframe-'+this.id+'"'+
' style="overflow:auto;width:100%;height:100%;"'+
' frameborder="0" '+
' src="'+this.src+'"'+
'></iframe>';
},
reload: function() {
this.setSrc(this.src);
},
reset: function() {
var iframe=this.getDOM();
var iframeParent=iframe.parentNode;
if (iframe && iframeParent) {
iframe.src='about:blank';
iframe.parentNode.removeChild(iframe);
}

iframe=document.createElement('iframe');
iframe.frameBorder=0;
iframe.src=this.src;
iframe.id='iframe-'+this.id;
iframe.style.overflow='auto';
iframe.style.width='100%';
iframe.style.height='100%';
iframeParent.appendChild(iframe);
},
setSrc: function(src, loadingText) {
this.src=src;
var iframe=this.getDOM();
if (iframe) {
iframe.src=src;
}
},
getSrc: function() {
return this.src;
},
getDOM: function() {
return document.getElementById('iframe-'+this.id);
},
getDocument: function() {
var iframe=this.getDOM();
iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
return iframe.document;
},
destroy: function() {
var iframe=this.getDOM();
if (iframe && iframe.parentNode) {
iframe.src='about:blank';
iframe.parentNode.removeChild(iframe);
}
this.callParent(arguments);
},

//call this to manually change content.
//don't call until component is rendered!!!
update: function(content) {
this.setSrc('about:blank');
try {
var doc=this.getDocument();
doc.open();
doc.write(content);
doc.close();
} catch(err) {
// reset if any permission issues
this.reset();
var doc=this.getDocument();
doc.open();
doc.write(content);
doc.close();
}
}
});


a quick test block here:



//TEST STUFF
var panel=Ext.create('Ext.ux.SimpleIFrame', {
//title: 'Hello',
border: false,
src: 'http://localhost'
});

var stuff=Ext.create('Ext.Window', {
title: 'Test IFrame',
width: 600,
height: 500,
layout: 'fit',
renderTo: Ext.getBody(),
items: panel,
buttons: [{
text: 'Sencha',
scope: panel,
handler: function() {
this.setSrc('http://www.sencha.com');
}
},{
text: 'Reset',
scope: panel,
handler: function() {
this.reset();
}
},{
text: 'Reload',
scope: panel,
handler: function() {
this.reload();
}
},{
text: 'Add Some Content',
scope: panel,
handler: function() {
this.update('<div><b>Some Content....</b></div>');
}
},{
text: 'Destroy',
scope: panel,
handler: function() {
this.destroy();
}
}]
});

Ext.onReady(function () {
stuff.show();
});

steffenk
12 Apr 2011, 10:29 AM
funny, i did something simular, but in a different way. See yourself:

http://dev.sk-typo3.de/ext4/own/iframe.html

conorarmstrong
12 Apr 2011, 1:06 PM
yup - pretty similar ;-)

I've just added a reload method, and a widget alias to allow easier instantiation.

mitchellsimoens
19 Apr 2011, 6:12 AM
I have moved this thread to the extensions forum and deleted the new one you created :D

gelleneu
22 Apr 2011, 9:57 AM
Hi,

is it possible to inject ExtJS Code into the Iframe's content to load f.e. Ext4 Components into the Iframes Content (same Domain)?

conorarmstrong
25 Apr 2011, 7:07 AM
An iframe's contains its own DOM and object space separate from its container. If you had the base extjs loaded in the parent container it would not be directly accessible from the child iframe. You ould possibly reference it with Ext=top.Ext but scope would be that of the parent.

If you want to place ExtJS components inside an iframe, you may need to first load a separate ExtJS framework into the iframe. Once done, you could then use this component's getDOM method to access the iframe's object space.

steffenk
25 Apr 2011, 2:10 PM
You could use

Ext = top.Ext;
for referencing in iframe, but be aware that all Ext code will be run in scope of top window.

soros
19 May 2011, 11:09 AM
Thanks for the extension.

It worked great in 4.0.0, but it does not work when you upgrade to 4.0.1.
Here's the error that I'm getting:




Uncaught TypeError: Property 'onBeforeItemundefined' of object [object Object] is not a function
ext-all-debug.js:66872
Ext.define.processUIEvent ext-all-debug.js:66872 Ext.define.handleEvent ext-all-debug.js:66803
anonymous:5 wrap ext-all-debug.js:10949


Thanks

conorarmstrong
23 May 2011, 5:41 AM
I can't seem to reproduce your error. Can you post a test case?

sanjshah
31 May 2011, 6:14 AM
I tried with your test block but receive an error at line (ExtJS 4.0.1):

if (el.insertAdjacentHTML) {

Any ideas?

Thanks

conorarmstrong
1 Jun 2011, 8:05 AM
@sanjshah

There is no line in this extension:



if (el.insertAdjacentHTML) {


Am I missing something here?

MikeB
8 Jun 2011, 5:53 AM
I tried with your test block but receive an error at line (ExtJS 4.0.1):

if (el.insertAdjacentHTML) {

Any ideas?

Thanks

I had the same problem but discovered that the call to "stuff.show()" was occurring before the page had been fully rendered and the DOM wasn't ready (the "null" element was the doc.body).

To fix the "problem" in your test block, replace the "stuff.show()" with the following:



Ext.onReady(function () {
stuff.show();
});


Hope this helps.

mschwartz
8 Jun 2011, 6:02 AM
If you do something like this:



// top or main browser window
var ext_js = "actual contents of ext-all.js";
eval(ext_js);
// the above instead of loading ext-all.js via script tag


Then you can do:


eval(top.ext_js);


in your iframe.

Not so sure why you'd want the framework inside iframes, since costs so much memory for each instance.

conorarmstrong
14 Jun 2011, 1:46 AM
@MikeB

Thanks for the fix

I was running my test block from the console once the framework was already loaded, that's why I wasn't getting the error myself.

Change added to original code above.

silcreval
27 Aug 2011, 8:54 AM
I'm puting a SimpleIFrame inside a Ext.window.Window and for some reason the window border gets removed (ie the outer frame). I see the title and buttons, but the title area is transparent. I cant move or close the window.

Is there a way to put the frame inside a Ext.window.Window

Thanks :)

silcreval
27 Aug 2011, 9:09 AM
Figured out the problem - please ignore above post - nothing to do with SimpleIFrame.

flyzb
12 Sep 2011, 11:26 PM
I tested simpleiframe in IE6. And I found simpleIframe is lower than using iframe in IE6.
Test page iframe simpleiframe
my page <=6s <=19s

silcreval
19 Sep 2011, 11:04 PM
I noticed with Firefox 6.0.2 on Windows 7 that I can no longer move a window with the iframecomponent, it seems to just hang (goes grey). Tried various Ext versions 4.0.2, 4.0.6 with the same result. It works OK in Chrome though. Wonder if something is changed in FF recently?

conorarmstrong
10 Oct 2011, 2:53 PM
@silcreval

Tested this in FF 7.0.1 on Linux - and it seems ok. Was using it to display an email in a window. dragging, maximising etc all work ok.

ulysoft
27 Dec 2011, 11:39 AM
I have this problem I use sencha for my mobile web site (for iphone & Ipad). My code is workingnin Chrome, Safari and Iphone and Ipad IOS5 & Android. But in IOS4 the navigation between the items -iconclass) dont work and the result is only a blank page. I dont see the problem in my code and why i have no problem in new version of Ipad and Iphone ?

That is my code and thanks for help !





glossOnIcon: false,



onReady: function() {



var tabpanel = new Ext.TabPanel({



fullscreen: true,



// type: 'light',



tabBar: {



dock: 'bottom',



scroll: 'horizontal',



sortable: true,



layout: {



pack: 'center'



}



},











items: [



{ iconCls: 'home', title: 'Accueil', html: '<div><table style="width: 100%"><tr><td><iframe src="/mobile/ipad/accueil.aspx" name="a1" scrolling="no" frameborder="0" style="position:center; top:0px; left:0px; height: 2000px; width:100%; allowtransparency="false" border:0; border-width:0; border-style:solid; border-color:transparent"></iframe></td></tr></table></div>' },



{ iconCls: 'team', title: 'Membre', html: '<div><table style="width: 100%"><tr><td><iframe src="/mobile/ipad/member.aspx" name="a2" scrolling="no" frameborder="0" style="position:center; top:0px; left:0px; height: 2000px; width:100%; allowtransparency="false" border:0; border-width:0; border-style:solid; border-color:transparent"></iframe></td></tr></table></div>' },



{ iconCls: 'bookmarks', title: 'Job news',html: '<div><table style="width: 100%"><tr><td><iframe src="/mobile/ipad/job-news.aspx" name="a3" scrolling="no" frameborder="0" style="position:center; top:0px; left:0px; height: 2000px; width:100%; allowtransparency="false" border:0; border-width:0; border-style:solid; border-color:transparent"></iframe></td></tr></table></div>' },



{ iconCls: 'time', title: 'Calendrier', html: '<div><table style="width: 100%"><tr><td><iframe src="/mobile/ipad/evenement.aspx" name="a4" scrolling="no" frameborder="0" style="position:center; top:0px; left:0px; height: 2000px; width:100%; allowtransparency="false" border:0; border-width:0; border-style:solid; border-color:transparent"></iframe></td></tr></table></div>' },



{ iconCls: 'search', title: 'Recherche', html: '<div><table style="width: 100%"><tr><td><iframe src="/mobile/ipad/recherche.aspx" name="a5" scrolling="no" frameborder="0" style="position:center; top:0px; left:0px; height: 2000px; width:100%; allowtransparency="false" border:0; border-width:0; border-style:solid; border-color:transparent"></iframe></td></tr></table></div>' },



{ iconCls: 'chat', title: 'Tweet' , html: '<div><table style="width: 100%"><tr><td><iframe src="/sites/accueilulysoft/mobile/twitter.aspx" name="a6" scrolling="no" frameborder="0" style="position:center; top:0px; left:0px; height: 2000px; width:100%; allowtransparency="false" border:0; border-width:0; border-style:solid; border-color:transparent"></iframe></td></tr></table></div>' },



{ iconCls: 'more', title: 'Bonus', html: '<div><table style="width: 100%"><tr><td><iframe src="/mobile/ipad/bonus.aspx" name="a7" scrolling="no" frameborder="0" style="position:center; top:0px; left:0px; height: 2000px; width:100%; allowtransparency="false" border:0; border-width:0; border-style:solid; border-color:transparent"></iframe></td></tr></table></div>' }







],



dockedItems: [{



xtype: 'toolbar',



dock: 'top',



defaults: {



ui: 'plain'



},



scroll: 'horizontal',



layout: {



pack: 'center'



},



defaults: {



iconMask: true,



ui: 'plain'



},







}]











});



}



});

PranKe01
14 May 2012, 5:20 AM
Has this Extension been tested with ExtJS4.1? I am migrating to 4.1 and want to make sure everything works fine.
Thanks your your hints :)

talha06
17 May 2012, 12:51 AM
Has this Extension been tested with ExtJS4.1? I am migrating to 4.1 and want to make sure everything works fine.
Thanks your your hints :)
Yeah I'm using Ext JS 4.1 and it works great! Thanks a lot conorarmstrong (http://www.sencha.com/forum/member.php?28607-conorarmstrong)!=D>

conorarmstrong
8 Jun 2012, 6:34 AM
no problem

conorarmstrong
8 Jun 2012, 6:44 AM
if you get an error in chrome as follows when using this component:

"Uncaught TypeError: Cannot read property 'parentNode' of null"

it is probably that you have called the update method before the component is rendered.

FanOfExt
9 Jan 2013, 5:46 PM
Hi, I'm working on my first ext app. I want to display some web pages in panels in my ext app. I think this solution will work for me as I'm using ext 4.1.x. My question is, how do I go about installing it? Do I create a js file for the code in my "view" folder and reference it using xtype: simpleiframe ?

Thanks

jerry81
10 Jan 2013, 10:21 PM
Hi,

I have a webpage in extjs 4.1.1a with your iframe component that opens a page based on some user inputs.
For example, when user clicks on 1 of the menu items, the following code is called:


myiframe.src = 'http://localhost:8080/test.html'
myiframe.reload();

The problem arises when the page is a broken link. After the iframe shows the default IE "Internet Explorer cannot display the webpage" page, whenever i do a keypress on a textfield outside the iframe with a keyup event, I get a script error in IE that says "Unexpected call to method or property access".

The textfield codes are simply:

...
xtype: 'textfield',
listeners:{
keyup: function(t,e,eOpts){
alert('key up');
}
...



I do not get any errors if the page is a valid page when I do the same keypress.
If I change the keyup to any other events like focus, I do not get any errors regardless of whether the iframe loads successfully.

I tried firefox and its working fine without any errors in firebug console.

I am not sure if this is a general extjs bug and any help would be appreciated.

ethraza
28 Jan 2014, 10:18 AM
Hi. I'm trying to migrate a webapp in ExtJs 3 to ExtJs 4.
I use ManagedIframes and in special, the "submitAsTarget" function.

ie.

myIFrame.submitAsTarget({
url : conn,
method : 'post',
params : Ext.apply({
mod : 'report'
}, prm)
});

The above code post the params and show the result html inside the iframe.
To try to mimic the result, that is post some params and show the result html in an iframe, I'm trying to submit an ExtJs form that targets the iframe, without success till now.


So, there is some way to get the same result with SimpleIFrame?


Thanks

ethraza
29 Jan 2014, 8:45 AM
Just got it.

Form with standardSubmit: true.


form.submit({
target : iframe.iframeEl.dom.name,
url : conn,
method : 'post',
params : Ext.apply({
mod : 'report'
}, prm)
});

Thanks