1. #1
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,663
    Vote Rating
    6
    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

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..."