1. #1
    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 iframePanel

    iframePanel


    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.

    PHP Code:
    /**
     * iFrame panel
     *
     * @author    Steffen Kamper
     */

    Ext.ns('TYPO3');

    TYPO3.iframePanel Ext.extend(Ext.Panel, {
        
    name'iframe',
        
    iframenull,
        
    srcExt.isIE && Ext.isSecure Ext.SSL_SECURE_URL 'about:blank',
        
    maskMessage'loading ...',
        
    doMasktrue,
        
            
    // component build
        
    initComponent: function() {
            
    this.bodyCfg = {
                
    tag'iframe',
                
    frameborder'0',
                
    srcthis.src,
                
    namethis.name
            
    }
            
    Ext.apply(this, {
            
            });
            
    TYPO3.iframePanel.superclass.initComponent.apply(thisarguments);
            
            
    // apply the addListener patch for 'message:tagging'
            
    this.addListener this.on;
            
        },
        
        
    onRender : function() {
            
    TYPO3.iframePanel.superclass.onRender.apply(thisarguments);
            
    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); 
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  2. #2
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    thank you very much for your shared plugin
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Location
    Austin, TX
    Posts
    47
    Vote Rating
    0
    slsmithtx is on a distinguished road

      0  

    Default


    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:

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

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    9
    Vote Rating
    0
    colinm is on a distinguished road

      0  

    Default An example of how to use it .. ?

    An example of how to use it .. ?


    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

  5. #5
    Sencha User rbraddy's Avatar
    Join Date
    Jul 2009
    Location
    Houston, TX
    Posts
    144
    Vote Rating
    7
    rbraddy is on a distinguished road

      0  

    Default


    Thank you very much - this is exactly what I needed!

  6. #6
    Sencha User rbraddy's Avatar
    Join Date
    Jul 2009
    Location
    Houston, TX
    Posts
    144
    Vote Rating
    7
    rbraddy is on a distinguished road

      0  

    Default


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

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

  7. #7
    Ext JS Premium Member
    Join Date
    Oct 2010
    Location
    Freiburg
    Posts
    23
    Vote Rating
    1
    chrisjs is on a distinguished road

      1  

    Default Iframe Panel for Version 4.1.3

    Iframe Panel for Version 4.1.3


    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:

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

  8. #8
    Sencha User
    Join Date
    Aug 2012
    Posts
    91
    Vote Rating
    0
    alex9311 is on a distinguished road

      0  

    Default


    Thank you! Just what I needed

  9. #9
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default update method

    update method


    added a simple replacement for the update method:

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


Similar Threads

  1. Scope in an iframepanel
    By stallard in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 27 Jul 2010, 2:13 AM
  2. Change iFramePanel title from within the iFrame
    By malstroem in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 20 Feb 2010, 11:23 AM
  3. iframepanel & datefield
    By joe123 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 30 Oct 2009, 1:44 AM
  4. Issue with iframepanel
    By border9 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 9 Nov 2008, 3:59 PM

Thread Participants: 7