Page 86 of 88 FirstFirst ... 36768485868788 LastLast
Results 851 to 860 of 879

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

  1. #851
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
      0  

    Default

    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:

    Code:
    {
    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..
    Last edited by brookd; 13 Mar 2012 at 9:27 PM. Reason: more info

  2. #852
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
      0  

    Default

    *bump* really stuck on this....

  3. #853
    Sencha User
    Join Date
    May 2009
    Posts
    30
    Vote Rating
    2
      0  

    Default

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

  4. #854
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
      0  

    Default Please help?

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

  5. #855
    Sencha User alexeiberkov's Avatar
    Join Date
    Sep 2010
    Location
    Belarus, Minsk
    Posts
    8
    Vote Rating
    0
      0  

    Default About `focus` method

    Does anyone know why on `focus` event does not work for minframe component ?
    PHP Code:
    this.add({
                
    xtype'iframepanel',
                
    borderfalse,
                ...
               
    listeners: {
                    
    focus: function(ag) {
                      
    alert('1');
                    }
              }
    }); 

  6. #856
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966
    Vote Rating
    15
      0  

    Default

    Quote Originally Posted by alexeiberkov View Post
    Does anyone know why on `focus` event does not work for minframe component ?
    PHP Code:
    this.add({
                
    xtype'iframepanel',
                
    borderfalse,
                ...
               
    listeners: {
                    
    focus: function(ag) {
                      
    alert('1');
                    }
              }
    }); 
    @alexei --

    Such events would only work for same-origin frames
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #857
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966
    Vote Rating
    15
      0  

    Default

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

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

    Code:
        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
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #858
    Sencha User
    Join Date
    Sep 2009
    Posts
    6
    Vote Rating
    0
      0  

    Default

    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

  9. #859
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Vote Rating
    0
      0  

    Default Latest MIFrame

    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

  10. #860
    Sencha User
    Join Date
    Sep 2009
    Posts
    6
    Vote Rating
    0
      0  

Page 86 of 88 FirstFirst ... 36768485868788 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •