Hybrid View

  1. #1
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224
    Vote Rating
    2
    conorarmstrong is on a distinguished road

      0  

    Default Ext.ux.SimpleIFrame - Simple IFrame component

    Ext.ux.SimpleIFrame - Simple IFrame component


    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.

    Code:
    // 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:

    Code:
        //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();
    });
    Last edited by conorarmstrong; 8 Jun 2012 at 7:54 AM. Reason: verify working on v4.1
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Thumbs up


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

    http://dev.sk-typo3.de/ext4/own/iframe.html
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224
    Vote Rating
    2
    conorarmstrong is on a distinguished road

      0  

    Default


    yup - pretty similar ;-)

    I've just added a reload method, and a widget alias to allow easier instantiation.
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I have moved this thread to the extensions forum and deleted the new one you created
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Aug 2007
    Location
    Munich, Germany
    Posts
    135
    Vote Rating
    0
    gelleneu is on a distinguished road

      0  

    Default Inject ExtJS-Code

    Inject ExtJS-Code


    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)?

  6. #6
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224
    Vote Rating
    2
    conorarmstrong is on a distinguished road

      0  

    Default


    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.
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  7. #7
    Sencha Premium Member ethraza's Avatar
    Join Date
    Jun 2007
    Location
    Brazil
    Posts
    362
    Vote Rating
    3
    ethraza is on a distinguished road

      0  

    Default


    Hi. I'm trying to migrate a webapp in ExtJs 3 to ExtJs 4.
    I use ManagedIframes and in special, the "submitAsTarget" function.

    ie.
    PHP Code:
    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
    LAMPE (Linux / Apache / MySQL / PHP / ExtJs)

  8. #8
    Sencha Premium Member ethraza's Avatar
    Join Date
    Jun 2007
    Location
    Brazil
    Posts
    362
    Vote Rating
    3
    ethraza is on a distinguished road

      0  

    Default Nevermind

    Nevermind


    Just got it.

    Form with standardSubmit: true.

    PHP Code:
    form.submit({
       
    target iframe.iframeEl.dom.name,
       
    url conn,
       
    method 'post',
       
    params Ext.apply({
          
    mod 'report'
       
    }, prm)
    }); 
    Thanks
    LAMPE (Linux / Apache / MySQL / PHP / ExtJs)

Similar Threads

  1. Searching for a simple and smart day view component
    By begineer2 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 1 Jul 2009, 2:37 AM
  2. How to get a Component from iframe
    By amosspray in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 1 Apr 2009, 6:13 PM
  3. which layout is the more simple(as a div tag) to add component?
    By fother in forum Ext GWT: Help & Discussion (1.x)
    Replies: 3
    Last Post: 23 Jan 2009, 6:53 AM
  4. New Iframe in ContentPanel from simple layout
    By jfaust97 in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 21 May 2007, 8:11 PM

Thread Participants: 15