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

[brookd]

Hey Hendricd,

Thanks for the reply. I checked out the demo and tried adding the visibility mode plugin to my code, I tried adding the shadow:false on the window and anything else I could find that was different from my code. But no luck.

I also tried using the uxmedia class instead of the miframe classes but I got the same result. I think I have all the same settings you have in your demo.

So the question is what would cause this behavoir? I even created a new window using your exact code and had the same issues on the corners.

shim.png

1. I have the visibility plugin defined on the parent tabPanel
2. Ext.useShims = true
3. Window has shim=true / shadow = false
4. My config looks like:

{
xtype   : 'mediapanel',
id      : 'pdfplaything',
mediaCfg:{
    mediaType  : 'PDF',
    url        : lf.app.formManager.getFormUrl(this.node.id,'preview'),
    autoSize   : true,
    autoScroll   :true
}

This element is a child of the tabPanels tab. Could that be an issue?

Also when I drag my window over the PDF it disapears whereas in your demo the outline is still visible. So I guess the shim is not being applied. But when I trace the code I can see the classes being applied to the shim div..

[brookd]

*bump* really stuck on this....

[Antjac]

Yep, I've the same issue, not very nice but i've not found a solution...

[brookd]

Hendric,

Any chance you could shed some light on this? I am willing to pay you for your time if you want to contact me offlist or pm me...

[alexeiberkov]

Does anyone know why on `focus` event does not work for minframe component ?

this.add({
            xtype: 'iframepanel',
            border: false,
            ...
           listeners: {
                focus: function(a, g) {
                  alert('1');
                }
          }
}); 

[hendricd]

Does anyone know why on `focus` event does not work for minframe component ?

this.add({
            xtype: 'iframepanel',
            border: false,
            ...
           listeners: {
                focus: function(a, g) {
                  alert('1');
                }
          }
}); 

@alexei --

Such events would only work for same-origin frames

[hendricd]

@brookd:

Try one or more of these overrides for Ext.Layer. Your focus should be there. The Visibility plugin, MIF, or uxMedia have nothing to do with your symptoms. The z-order of Window framing and Shadowing are the real issue.

(function(){
    
var isDocRe= /#document|body/i,
    supr = Ext.Element.prototype;

Ext.override ( Ext.Layer, {
    // private
    constrainXY : function(){
        if(this.constrain){
            //honor the Layer's parentNode instead of simply document  
            var container  = Ext.fly( this.dom.parentNode, '_constrain'),
                isTop = isDocRe.test(container.dom.nodeName),
                vw = isTop ? Ext.lib.Dom.getViewWidth() : container.getWidth(),
                vh = isTop ? Ext.lib.Dom.getViewHeight() : container.getHeight();
              
            var s = container.getScroll();  

            var xy = this.getXY();
            var x = xy[0], y = xy[1];
            var so = (this.shadowOffset || 0) * 2;
            var w = this.dom.offsetWidth+so, h = this.dom.offsetHeight+so;
            // only move it if it needs it
            var moved = false;
            // first validate right/bottom
            if((x + w) > vw + s.left){
                x = vw - w - so;
                moved = true;
            }
            if((y + h) > vh+s.top){
                y = vh - h - so;
                moved = true;
            }
            // then make sure top/left isn't negative
            if(x < s.left){
                x = s.left;
                moved = true;
            }
            if(y < s.top){
                y = s.top;
                moved = true;
            }
            if(moved){
                if(this.avoidY){
                    var ay = this.avoidY;
                    if(y <= ay && (y+h) >= ay){
                        y = ay-h-5;
                    }
                }
                xy = [x, y];
                this.storeXY(xy);
                supr.setXY.call(this, xy);
                this.sync();
            }
        }
        return this;
    },

    // private
    destroy : function(){
        this.hideShim();
        this.shadow && this.shadow.hide();
        this.dom && Ext.Layer.superclass.remove.call(this);
    },

    remove : function(){
        this.destroy();
    }
});

// Private utility class that manages the internal Shadow cache
Ext.Shadow.Pools = function(){
    var p = [];
    var markup = Ext.isIE ?
                 '<div class="x-ie-shadow"></div>' :
                 '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
    return {
        pull : function(){
            var sh = p.shift();
            if(!sh){
                sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
                sh.autoBoxAdjust = false;
            }
            return sh;
        },

        push : function(sh){
            p.push(sh);
        },
        destroy : function(){
          !!p.length && Ext.destroy(p);    
        }
    };
}();
}();

And, ANYTIME you call for the floating window you must let the WindowManager do it's job (yet forcefully):

    yourButton = {
                 text : 'Show Shimmed Popup Window',
                 scope : this,
                 handler : function(button){
                    Ext.useShims = true;   //enable IFRAME shims
                    var shimmedWindow = Ext.getCmp('shimWin') ||  //Re-use it!
                        new Ext.Window({
                            id: 'shimWin',
                            width : 200,
                            height: 200,
                            title : 'Shimmed Window',
                            html: 'test',
                            closeAction: 'hide',
                            shadow : true,
                            shim : true    //IFRAME-shim the window
                           
                        });
                        
                    shimmedWindow.isVisible() ? shimmedWindow.toFront() :
                            shimmedWindow.show(button.el.dom);
                 }
              }

I would not enable: Ext.useShims until you absolutely need it for this purpose, otherwise every component in your layout will get an IFRAME shim behind it ! Expensive!

Good Luck

[zboris]

I have asked this question in wrong forum, but I believe it should be rather posted here.

Using miframe within border layout causes CSS styling problems.
Basically all my buttons within miframe loaded content keeping x-btn-over state even after mouse pointer leaves button. Clicking on grid column options - displaces popup menu position. This menu stays permanently on top of grid. Sometimes that menu appears at random positions on the screen...
If i reload iframe content second time - everything is fine.
Hope image below can describe the nature of my problem in better words.

Has anyone experienced similar?

PS: if I load content without miframe, everything renders/ behaves perfectly fine.
Stale x-btn-over class
stale-xbtnover.png

Misplaced grid column menu:
misplaced-menu.jpg

[kamalraj]

Hi All,

Going through this thread,

If my understanding is right, ux.ManagedIFrame 2.x can be used with Ext 3x.

I am using Ext js 4.1.

Is there a latest MIFrame available which is compatible with the Ext js 4.1?

Please guide me with this.

--Kamal

[zboris]

Kamalraj.
have a look here
http://www.sencha.com/forum/showthre...l=1#post621353