PDA

View Full Version : iframePanel



steffenk
20 Sep 2010, 9:42 AM
Hi,

i have to use iframes, but i didn't wanted to use the managediframe plugin, as i only needed some basic things. So this is a very light-weight plugin i want ot share.


/**
* iFrame panel
*
* @author Steffen Kamper
*/

Ext.ns('TYPO3');

TYPO3.iframePanel = Ext.extend(Ext.Panel, {
name: 'iframe',
iframe: null,
src: Ext.isIE && Ext.isSecure ? Ext.SSL_SECURE_URL : 'about:blank',
maskMessage: 'loading ...',
doMask: true,

// component build
initComponent: function() {
this.bodyCfg = {
tag: 'iframe',
frameborder: '0',
src: this.src,
name: this.name
}
Ext.apply(this, {

});
TYPO3.iframePanel.superclass.initComponent.apply(this, arguments);

// apply the addListener patch for 'message:tagging'
this.addListener = this.on;

},

onRender : function() {
TYPO3.iframePanel.superclass.onRender.apply(this, arguments);
this.iframe = Ext.isIE ? this.body.dom.contentWindow : window.frames[this.name];
this.body.dom[Ext.isIE ? 'onreadystatechange' : 'onload'] = this.loadHandler.createDelegate(this);
},

loadHandler: function() {
this.src = this.body.dom.src;
this.removeMask();
},

getIframe: function() {
return this.iframe;
},
getUrl: function() {
return this.body.dom.src;
},

setUrl: function(source) {
this.setMask();
this.body.dom.src = source;
},

resetUrl: function() {
this.setMask();
this.body.dom.src = this.src;
},

refresh: function() {
if (!this.isVisible()) {
return;
}
this.setMask();
this.body.dom.src = this.body.dom.src;
},

/** @private */
setMask: function() {
if (this.doMask) {
this.el.mask(this.maskMessage);
}
},
removeMask: function() {
if (this.doMask) {
this.el.unmask();
}
}
});
Ext.reg('iframePanel', TYPO3.iframePanel);

msinn
8 Dec 2010, 7:54 AM
thank you very much for your shared plugin

slsmithtx
9 Dec 2010, 10:43 AM
Thanks for this object. We'd been wanting something like this for awhile to let us get away from miframe. I added the following function:



getIframeBody: function() {
var b = this.iframe.document.getElementsByTagName('body');
if (!Ext.isEmpty(b)){
return b[0];
} else {
return '';
}
}


that allows us to access the dom of the iframe. If someone has a better method of accomplishing this, please post it.

colinm
20 Apr 2011, 1:48 AM
Hi,
I just need to display another page inside of one of my panel.
your lightweight plugin looks nice and perfectly adapted to what i need. right?
would it be possible to post a small example .. . so far i could not make it work.
thank you
colin

rbraddy
3 Jun 2012, 7:35 AM
Thank you very much - this is exactly what I needed!

rbraddy
3 Jun 2012, 7:40 AM
Here's an example of how to use it (with my mods - I renamed the FrameClass to "IFramePanel").

In this test case, I'm using an older ExtJS 3 library (still working on getting it into Extjs 4.1 format and working with Sencha Architect as a component):



/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){

var win;
// create the viewport window that will fit the browser client window area
win = new Ext.Viewport({
layout:'fit',
title: 'Viewport Window',
closeAction:'hide',
plain: true,
items: [
{
id: 'theFrame',
title: 'Project',
tabTip: 'Describe your launch project',
xtype: 'IFramePanel',
closable: false,
titleCollapse:true,
}
]
});
win.show(this);
var aFrame = Ext.getCmp('theFrame');
aFrame.setUrl("http://docs.sencha.com");
});



I hope that's helpful.
Rick

chrisjs
30 Nov 2012, 2:21 AM
Hello,

i used a modified version of this and now we are updating from 4.0.7 to 4.1.3

This is working with 4.1.3 in Firefox, but not in IE:


Ext.define('onlineplus.common.IframePanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.iframePanel',

/**
* iframe source url
*/
//src: Ext.isIE && Ext.isSecure ? Ext.SSL_SECURE_URL : 'about:blank',
src: 'about:blank',

/**
* Loading text for the loading mask
*/
loadingText: 'Loading ...',

/**
* Loading configuration (not implemented)
*/
loadingConfig: null,

/**
* Overwrites renderTpl for iframe inclusion
*/
renderTpl: [
// If this Panel is framed, the framing template renders the docked items round the frame
'{% this.renderDockedItems(out,values,0); %}',
// This empty div solves an IE6/7/Quirks problem where the margin-top on the bodyEl
// is ignored. Best we can figure, this is triggered by the previousSibling being
// position absolute (a docked item). The goal is to use margins to position the
// bodyEl rather than left/top since that allows us to avoid writing a height on the
// panel and the body. This in turn allows CSS height to expand or contract the
// panel during things like portlet dragging where we want to avoid running a ton
// of layouts during the drag operation.
(Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) ? '<div></div>' : '',
'<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
' {baseCls}-body-{ui}<tpl if="uiCls">',
'<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
'</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
'<iframe src="{src}" width="100%" height="100%" frameborder="0"></iframe>',
'{%this.renderContainer(out,values);%}',
'</div>',
'{% this.renderDockedItems(out,values,1); %}'
],

/**
* overwritten, data method for the renderTemplate
* updated for 4.1
*/
initRenderData: function() {
var me = this,
data = me.callParent({
src: this.getSource()
});

me.initBodyStyles();

me.protoBody.writeTo(data);
delete me.protoBody;

return data;
},

/**
* Delegates afterRender event
*/
initComponent: function() {
this.callParent(arguments);
this.on('afterrender', this.onAfterRender, this, {});
},

/**
* Gets the iframe element
*/
getIframe: function() {
return this.getTargetEl().child('iframe');
},

/**
* Gets the iframe source url
*
* @return {String} iframe source url
*/
getSource: function() {
return this.src;
},

/**
* Sets the iframe source url
*
* @param {String} source url
* @param {String} loading text or empty
* @return void
*/
setSource: function(src, loadingText) {
this.src = src;
var f = this.getIframe();
if (loadingText || this.loadingText) {
this.body.mask(loadingText || this.loadingText);
}

f.dom.src = src;
},

/**
* Reloads the iFrame
*/
resetUrl: function() {
var f = this.getIframe();
f.dom.src = this.src;
},

/**
* Fired on panel's afterrender event
* Delegates iframe load event
*/
onAfterRender: function() {
var f = this.getIframe();
f.on('load', this.onIframeLoaded, this, {});
},

/**
* Fired if iframe url is loaded
*/
onIframeLoaded: function() {
if (this.loadingText) {
this.body.unmask();
}
}

});



I am looking for a solution to get this running in IE.
I am testing with IE8

Greetings
Chris

alex9311
1 Mar 2013, 12:10 PM
Thank you! Just what I needed

wm003
7 Mar 2013, 2:02 AM
added a simple replacement for the update method:


update : function(html) {
this.iframe.document.write(html);
return this;
}