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
    36,801
    Vote Rating
    834
    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 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  

    Default


    You could use
    Code:
    Ext = top.Ext;
    for referencing in iframe, but be aware that all Ext code will be run in scope of top window.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  8. #8
    Touch Premium Member
    Join Date
    Aug 2007
    Posts
    18
    Vote Rating
    0
    soros is on a distinguished road

      0  

    Default Uncaught TypeError: Property 'onBeforeItemundefined' of object in 4.0.1

    Uncaught TypeError: Property 'onBeforeItemundefined' of object in 4.0.1


    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:


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

  9. #9
    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


    I can't seem to reproduce your error. Can you post a test case?
    ------------------------------------------
    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.

  10. #10
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    213
    Vote Rating
    0
    sanjshah is on a distinguished road

      0  

    Default


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

    if (el.insertAdjacentHTML) {

    Any ideas?

    Thanks

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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi