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();
});
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();
});