[3.0.x, 3.1.1] ux.ManagedIFrame 2.x

Hi,

I've got a problem when i try to load a PDF file into an iframePanel with IE10 (Working on IE9, FF, etc...)
In fact, when I load a PDF, the pdf is shown in the iframe with Foxit or Acrobat Reader.
But if i want to change the pdf in the iframe or hide it, the PDF still showed...
This issue is known (http://social.msdn.microsoft.com/For...f34ee02ab74/);

My solution in mirame.js

Code:

---

setLocation : function(url, discardUrl, callback, scope) {

                var src = url || this.src || this.resetUrl;
                var O = this._observable;
                this._unHook();
                Ext.isFunction(callback) && O.addListener('_docload', callback, scope||this, {single:true});
                this.showMask();
                var s = this._targetURI = (Ext.isFunction(src) ? src() || '' : src);
                if (discardUrl !== true) {
                    this.src = src;
                }
                try {
                    this._frameAction = true; // signal listening now
                    this.getWindow().location.replace(s);
                    this.checkDOM();
                } catch (ex) {
                    O.fireEvent.call(O,'exception', this, ex);
                };
              this.setSrc(""); //TO ADD
                return this;
               
            },

---

Another issue with IE11, by closing an iframe with PDF, I get a white screen...

I added this line in miframe.js

Code:

---

/** @private */
            beforeDestroy : function() {
                var F;
                if(F = this.getFrame())
                {
                    F.setSrc("about:blank"); //AA : Bug IE 11; (Ecran blanc);
                    F.remove();
                    this.frameEl = this.frameShim = null;
                }
                this.relayTarget && (this.relayTarget.frameEl = null);
                MIF.Component.superclass.beforeDestroy.call(this);
            }

---

Bump. Interested in using the ManagedIFrame in our commercial project.

This thread says there is a dual license, but the project page https://code.google.com/p/managediframe/ only mentions a single GNU GPL v3 license. If this thread is correct, then we'll need the information from the CDL link that is broken at the moment.

Thanks.

Anyone having something that work in Ext JS 5 and could share the class?

We've upgraded to Ext JS 3.4.3 in order to support IE 11. This seems to have broken the ManagedIFrame in the following code:

Code:

---

                    if (Ext.isIE) {
                        head.appendChild(rules);
                        ss = rules.styleSheet;
                        ss.cssText = cssText;
                    } else {

---

ss is returned as null which then breaks a lot of things. Oddly enough, it works fine in Compatibility View mode.

Are you planning on putting out an update to support IE11/Ext JS 3.4.3?

In Extjs 5 , there is Ext.ux.IFrame similar to this. Have any body explored and let me know, any method similer to setSrc() method. I am asking because, in IFrame in Extjs 5 src is private variable, so I defined it with URL to get data, once data on the URL changes I want to reload the data once again. I can see a method IFrame. getLoader().load(). But, load and setSrc() has signficent difference. When I click the refresh button, I want to get data from that src.
Any help, appriciated.
Thanks
Ranjay

Quote:

---

Originally Posted by ranjay

In Extjs 5 , there is Ext.ux.IFrame similar to this. Have any body explored and let me know, any method similer to setSrc() method. I am asking because, in IFrame in Extjs 5 src is private variable, so I defined it with URL to get data, once data on the URL changes I want to reload the data once again. I can see a method IFrame. getLoader().load(). But, load and setSrc() has signficent difference. When I click the refresh button, I want to get data from that src.
Any help, appriciated.
Thanks
Ranjay

---

Hi.
You can use this iframe window for extjs 5.

Code:

---

Ext.define('Ext.ux.window.IFWindow', {
    extend : 'Ext.window.Window',
    alias : 'widget.ifwindow',
    layout : 'fit',
    loadingText: 'Loading ...',   
    maximizable:true,
    minimizable:true,
    iframeConfig : {},
    config : {
        src : 'about:blank'
    },
    initComponent : function() {
        var me = this;
        me.items = me.items || [];
        me.iframe = Ext.create('Ext.ux.IFrame', Ext.apply({
            loadMask : 'Please wait ...',
            shrinkWrap:3,
            src : me.src
        }, me.iframeConfig));
        me.items.push(me.iframe);
        me.callParent(arguments);
    },
    destroy : function() {
        var me = this;
        me.iframe.destroy();//Ext.destroy(me.iframe);
        me.callParent();
    } // eo destroy


});

---

or use this my old solution for iframe window.

Code:

---

Ext.define('Jes.ux.window.IFWindow', {
    extend : 'Ext.window.Window',
    alternateClassName : 'Jes.window.IFWindow',
    alias : 'widget.ifwindow',
    src: 'about:blank',
    loadingText: 'Loading ...',   
    initComponent: function () {
        this.updateHTML();
        this.callParent(arguments);
    }//eo initComponent
    ,updateHTML: function () {
        this.html = '<iframe id="iframe-' + this.id + '"' + ' style="overflow:auto;width:100%;height:100%;"' + ' frameborder="0" ' + ' src="' + this.src + '"' + '></iframe>';
    },//eo updateHTML
   
    close : function() {
        if (document.all) {
            document.getElementById('iframe-' + this.id).src = "javascript:false";
            document.all['iframe-' + this.id].outerHTML = "";
            delete this.body.dom;
        } else {
            var frm = document.getElementById('iframe-' + this.id);
            if (frm && frm.parentNode) {
                frm.src = 'javascript:false';
                frm.outerHTML = "";
                if (frm && frm.parentNode) frm.parentNode.removeChild(frm);
                frm = null;
                delete this.body.dom;
                delete frm;
                //garbageCollect();
            }
        }
        Jes.ux.window.IFWindow.superclass.close.call(this);
    }//eo close
    ,reset: function () {
        var iframe = document.getElementById('iframe-' + this.id);
        var iframeParent = iframe.parentNode;
        if (iframe && iframeParent) {
            iframe.src = 'javascript:false';
            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);
    },//eo reset
    setSrc: function (src) {
        var iframe = document.getElementById('iframe-' + this.id);
        if (iframe) {
            iframe.src = src;
        }
        this.src = src;
    },//eo setSrc
    getSrc: function () {
        return this.src;
    },//eo getSrc
    getDOM: function () {
        return document.getElementById('iframe-' + this.id);
    },//eo getDOM
    getDocument: function () {
        var iframe = this.getDOM();
        iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
        return iframe.document;
    },//eo getDocument
    destroy: function () {
        var iframe = document.getElementById('iframe-' + this.id);
        if (iframe && iframe.parentNode) {
            iframe.src = 'javascript:false';
            iframe.parentNode.removeChild(iframe);
        }
        this.callParent(arguments);
        console.log('IFrameWindow destroyed ...');
    },//eo destroy
    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();
        }
    }//eo update
});

---

Quote:

---

Originally Posted by jmacmillan

We've upgraded to Ext JS 3.4.3 in order to support IE 11. This seems to have broken the ManagedIFrame in the following code:

Code:

---

                    if (Ext.isIE) {
                        head.appendChild(rules);
                        ss = rules.styleSheet;
                        ss.cssText = cssText;
                    } else {

---

ss is returned as null which then breaks a lot of things. Oddly enough, it works fine in Compatibility View mode.

Are you planning on putting out an update to support IE11/Ext JS 3.4.3?

---

replace ss = rules.styleSheet to ss = rules.sheet, if you support IE11 only, otherwise it would need wrapped in an ternary.

IE11 changed the name.

Forgive me it this has been mentioned in this thread. I searched and found nothing here or much in the Google-sphere. I did find:
http://stackoverflow.com/questions/26834845/in-ie11-event-is-not-firing-in-javascript

Which explains the issue.

Recently, we had an issue with the ManagedIframe callback. Found the error about line 265 in mif.js

Previously, this did:

Code:

---

Ext.isIE? 'readystatechange' : 'load',

---

We have it now:

Code:

---


this.on(
                'load',
                this.loadHandler,
                this,
                /**
                * Opera still fires LOAD events for images within the FRAME as well,
                * so we'll buffer hopefully catching one of the later events
                */
                Ext.isOpera ? {buffer: this.operaLoadBuffer || 2000} : null
);

---

We aren't supporting any browser < IE11, so ymmv. MS dropped their preprietary support for IE's iframe "readystatechange" event, instead, they now use the W3C standard, 'load'.

I need a commercial license for this but licensing page not work or email.