Ext.ux.SimpleIFrame - Simple IFrame component

[conorarmstrong]

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]

funny, i did something simular, but in a different way. See yourself:

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

[conorarmstrong]

yup - pretty similar ;-)

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

[mitchellsimoens]

I have moved this thread to the extensions forum and deleted the new one you created

[gelleneu]

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]

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]

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]

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]

I can't seem to reproduce your error. Can you post a test case?

[sanjshah]

I tried with your test block but receive an error at line (ExtJS 4.0.1):

if (el.insertAdjacentHTML) {

Any ideas?

Thanks