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

[florin.raicu]

You should not load the EXTJS Framework in the iFrames. Then you have no freezing problems. Access to Ext is possible through parent.ext .

Hope this helps. For me it fixed all freezing issues.

I'm not using iframes. I'm using mif in order to use the tinyMCE.

When I'm using MIF and also a form in a tab (form with property uplod set to true) the IE is freezing

[mschwartz]

doug,

Ext-3.1.1 (just downloaded), mif-2.1 (just downloaded from your repo).

region: 'center',
layout: 'card',
activeItem: 0,
items: [
  ...
  {
    xtype: 'iframepanel',
    id: 'myframe',
    url: 'blank.html'
  }
...
]

Much later in the program execution:

var myframe = Ext.getCmp('myframe');
myframe.getFrameDocument().write('');

myframe.getFrameDocument() is null

(the function exists, but returns null)

Steping into getFrameDocument():

getFrameDocument : function() {
  return this.getFrame() ? this.frameEl.getFrameDocument() : null;
},

and into getFrame():

getFrame : function(){
  if(this.rendered){
    if(this.frameEl){ return this.frameEl;}
    var f = this.items && this.items.first ? this.items.first() : null;
    f && (this.frameEl = f.frameEl);
    return this.frameEl;
  }
  return null;
},

this.frameEl is null.

Additional info:

Set a breakpoint at line ~2012 in mif.js in the onRender() function and it's never called.

[tester1]

I'm not using iframes. I'm using mif in order to use the tinyMCE.

When I'm using MIF and also a form in a tab (form with property uplod set to true) the IE is freezing

MIF ist simply an Iframe with some additional logic. You simply should not load any EXTJS Scripts in the Pages that you load in an MIF Panel. That is documented on the MIF Page as well.

[muratyildiz]

I am able to resolve the problem by referencing miframe.js instead of mif.js. But I am getting 'this.dom.readyState is null or not an object' error in IE when closing a Iframe window. Window is closing but then browser locking.

I am not getting this error in FF. But locking too.

            var winMenuItem = new Ext.ux.ManagedIFrame.Window( {
                title : baslik,
                width : genislik,
                height : yukseklik,
                maximizable : true,
                collapsable : true,
                id : tabId + "Win",
                constrain : true,
                modal : showModal,
                closeAction : 'hide',
                onEsc : Ext.emptyFn(),
                closable : true,
                loadMask : {
                    msg : 'Loading...'
                },
                autoScroll : true,
                defaultSrc : adres,
            });
            winMenuItem.show();

close method

        closeWindow : function(winId) {
            var win = window.parent.Ext.getCmp(winId);
            if (win) {
                win.close();
            }

[yugho]

Hi..

I have several problems here with miframe. I need to use iframe.

ExtJS : 3.1.1.
Test case: webpage containing javascript with only 2 panels(collapsible), and include miframe extension
miframe: 2 and 2_01

IE: javascript error: _elCache.$_doc is null, row 31 of miframe.js

var f=function(){};f.prototype=El.prototype;var docEl=new f();docEl.dom=el;docEl._isDoc=true;return cache._elCache['$_doc']=docEl;}

Firefox: page successfully loaded, but when upper panel is collapsed, lower panel won't relocated its position.

I need to solve both problems.... I've checked the codes and several resources, but still can't figure out the problem. Please give me some clue. Thank you..

[massimo]

I have the problem that you can see in the attached image.
When the menu float over the iFrame (a page with a java applet) the menu item is totally visible but the underlying panel is not visible.

I try setting z-order for the menu but I'm not able to solve the problem.

Can someone help me?

Sorry for my poor english, thank you.

[TheBerliner]

Hello Doug,

I am currently having a hard time getting link clicks out of an iFrame following your examples. I just don't understand how it works but I will spend a fourth day trying on my own before bugging you.

But while reading through the documentation and sources I noticed one little error that might confuse others. The source comment for eventsFollowFrameLinks contains some wrong comment when I believe what is said here in the learning part.

It's exactly the same comment that seems to be correct for disableMessaging.

Just as a little hint.

Regards

[richgoldmd]

I have the problem that you can see in the attached image.
When the menu float over the iFrame (a page with a java applet) the menu item is totally visible but the underlying panel is not visible.

I try setting z-order for the menu but I'm not able to solve the problem.

Can someone help me?

Sorry for my poor english, thank you.

This is not an MIF problem. This is an old problem with Ext. See this thread: http://www.extjs.com/forum/showthread.php?t=27515
I am still using this fix in Ext3.1.1 - but the css changes are no longer needed.

Here is my current override for this problem:

// Note +2 adjustments below... seems to solve shimming in IE7+ - needs further research
// This appears to still be required in Ext 3.1.x The underlying code has not really changed.
if (Ext.isIE) {
Ext.Layer.prototype.sync = function(doShow){
    var sw = this.shadow;
    if(!this.updating && this.isVisible() && (sw || this.useShim)){
        var sh = this.getShim();

        var w = this.getWidth(),
            h = this.getHeight();

        var l = this.getLeft(true),
            t = this.getTop(true);

        if(sw && !this.shadowDisabled){
            if(doShow && !sw.isVisible()){
                sw.show(this);
            }else{
                sw.realign(l, t, w, h);
            }
            if(sh){
                if(doShow){
                    sh.show();
                }
                // fit the shim behind the shadow, so it is shimmed too
                var a = sw.adjusts;
                var sa = Ext.isIE ? 2 : 0;
                sh.setSize(w+a.w+sa, h+a.h+sa);
                sh.setLeftTop(Math.min(l, l+a.l)+sa, Math.min(t, t+a.t)+sa);
            }
        }else if(sh){
            if(doShow){
                sh.show();
            }
            sh.setSize(w, h);
            sh.setLeftTop(l, t);
        }
    }
};    
}

[mystix]

This is not an MIF problem. This is an old problem with Ext. See this thread: http://www.extjs.com/forum/showthread.php?t=27515
I am still using this fix in Ext3.1.1 - but the css changes are no longer needed.

@richgoldmd:
i've moved your original bug report from the 2.x Bug forum to the 3.x Bug forum, and bumped it as well to get things back on the radar.

@jamie is requesting a test case for the issue, so if you could provide one, it would help speed things along.

[bocockli]

Hi

I've got a basic setup of a modal window with a single iframe panel in it.

If I resize the window horizontally and vertically, then click the magnifying glass over the image, the image will zoom and the panel bring in vertical and horizontal scrollbars as expected.

However the image will only stretch horizontally to fill the increased panel size, not vertically. So I end up with a blank area at the bottom of the panel, rather than the image.

Looking the the HTML for the iframe, you can see the width value changes on a resize, the height doesn't. Is this normal or a bug?

Thanks, Len