iframePanel

[steffenk]

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.

/**
 * iFrame panel
 *
 * @author    Steffen Kamper
 */

Ext.ns('TYPO3');

TYPO3.iframePanel = Ext.extend(Ext.Panel, {
    name: 'iframe',
    iframe: null,
    src: Ext.isIE && Ext.isSecure ? Ext.SSL_SECURE_URL : 'about:blank',
    maskMessage: 'loading ...',
    doMask: true,
    
        // component build
    initComponent: function() {
        this.bodyCfg = {
            tag: 'iframe',
            frameborder: '0',
            src: this.src,
            name: this.name
        }
        Ext.apply(this, {
        
        });
        TYPO3.iframePanel.superclass.initComponent.apply(this, arguments);
        
        // apply the addListener patch for 'message:tagging'
        this.addListener = this.on;
        
    },
    
    onRender : function() {
        TYPO3.iframePanel.superclass.onRender.apply(this, arguments);
        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); 

[msinn]

thank you very much for your shared plugin

[slsmithtx]

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:

    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.

[colinm]

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

[rbraddy]

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

[rbraddy]

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

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

[chrisjs]

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:

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

[alex9311]

Thank you! Just what I needed

[wm003]

added a simple replacement for the update method:

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