Results 1 to 6 of 6

Thread: [2.2.1] IE menu and qtip shim incorrect

  1. #1
    Ext User
    Join Date
    May 2008
    Posts
    51
    Vote Rating
    0
      0  

    Default [2.2.1] IE menu and qtip shim incorrect

    The shim is not the correct size in IE7 or IE8 for menus and quicktips displaying over MHT/PDF content.
    I have a tab panel operating as a multiple document viewer - each document is shown in a Managed IFrame Panel tab. The documents are HTML, MHT or PDF. The iframe tab has a top button bar and the tab has a tab close context menu.

    The shim for the context menu and the button bar Quicktips does not extend far enough to include the shadow. See screen shot. This only affects MHT, PDF - HTML is fine.

    I fixed it by overriding sync() in Ext.Layer as follows..maybe there's a better way?
    Code:
    if(sh){
                        if(doShow){
                           sh.show();
                        }
                        // fit the shim behind the shadow, so it is shimmed too
                        var a = sw.adjusts, s = sh.dom.style;
                        s.left = (Math.min(l, l+a.l))+"px";
                        s.top = (Math.min(t, t+a.t))+"px";
                        //HERE ARE MY CHANGES
                        s.width = sw.el.getWidth() +"px";
                        s.height = sw.el.getHeight()+"px";
                    }
    Attached Images Attached Images

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,156
    Vote Rating
    987
      0  

    Default

    Can you post a test case that actually demonstrates the issue?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext User
    Join Date
    May 2008
    Posts
    51
    Vote Rating
    0
      0  

    Default Here you go

    Bit of a hack out of my real code but it does the job.
    miframe-min.js is the managed iframe extension from Doug H.
    TabCloseMenu.js is from your examples
    The Hello.mht is just any old MHT file.
    Once page is loaded just right click on the tab - the tab close menu is cut off as per my original screen shot
    HTML Code:
    <html id="mBOSMgr">
    <head>
        <!-- LIBS -->
        <link rel="stylesheet" type="text/css" href="/ExtJS/resources/css/ext-all.css"/>
        <script type="text/javascript" src="/ExtJS/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ExtJS/ext-all.js"></script>
        <script type="text/javascript" src="/ExtJS/miframe-min.js"></script>
        <script type="text/javascript" src="/mBOSMgr/mBOSLib/TabCloseMenu.js"></script>
        <script type="text/javascript">
      Ext.BLANK_IMAGE_URL = '/ExtJS/resources/images/default/s.gif';
      Ext.ns('mBOS');
      // application main entry point
      Ext.onReady(function() {
       Ext.useShims = true;
       Ext.QuickTips.init();
       alert('hi');
       var infoTabPanel = new Ext.TabPanel({
        region:'center', // for the border layout
        margins:'2 2 2 0',
        plain:false, //no tab strip behind the tabs
        border: false,
        defaults:{
         autoScroll: true,
         autoShow: true
        },
        enableTabScroll:true, //if lots of tabs open allow then to scroll left/right
        items: [
         new Ext.ux.ManagedIframePanel({
          title: 'MHT Tab',
          defaultSrc: { url: '/mBOSMgr/Hello.mht', discardUrl: true  }
         })
         ],
        plugins: new Ext.ux.TabCloseMenu()
       });
       var viewport = new Ext.Viewport({
        layout:'border',
        items:[
         infoTabPanel
        ],
        listeners: {
         render: function () {
          infoTabPanel.setActiveTab(0);
         }
        }
       });
      }); // end onReady
        </script>
    </head>
    <body >
    </body>
    </html>
     

  4. #4
    Ext User
    Join Date
    Apr 2009
    Posts
    11
    Vote Rating
    0
      0  

    Default

    Is there a solution to this issue? I have the exact same problem as shown in your screen shot with flash, applets and active x controls.

  5. #5
    Ext User
    Join Date
    May 2008
    Posts
    51
    Vote Rating
    0
      0  

    Default

    The fix I included in my initial post has been workign out for me just fine.

  6. #6
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966
    Vote Rating
    18
      0  

    Thumbs up Confirmed...

    I've been using @excelsis' Layer fix for shadow, shim sync over the Google Earth plugin as well, which exposed another hole with GridView (like when you have a gridPanel in the South region, and the column menus render above in the center region). It lacks a way to pass along shadow options to the menus. Fix below for Ext 2.x:

    Code:
    Ext.override(Ext.grid.GridView, {
       // private
        renderUI : function(){
    
            var header = this.renderHeaders();
            var body = this.templates.body.apply({rows:'&nbsp;'});
    
            var html = this.templates.master.apply({
                body: body,
                header: header,
                ostyle: 'width:'+this.getOffsetWidth()+';',
                bstyle: 'width:'+this.getTotalWidth()+';'
            });
    
            var g = this.grid;
            
            var shadow = Ext.value(this.shadow, Ext.menu.Menu.prototype.shadow);
    
            g.getGridEl().dom.innerHTML = html;
    
            this.initElements();
    
            // get mousedowns early
            Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
            this.mainHd.on("mouseover", this.handleHdOver, this);
            this.mainHd.on("mouseout", this.handleHdOut, this);
            this.mainHd.on("mousemove", this.handleHdMove, this);
    
            this.scroller.on('scroll', this.syncScroll,  this);
            if(g.enableColumnResize !== false){
                this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
            }
    
            if(g.enableColumnMove){
                this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
                this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
            }
    
            if(g.enableHdMenu !== false){
                if(g.enableColumnHide !== false){
                    this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu", shadow : shadow });
                    this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
                    this.colMenu.on("itemclick", this.handleHdMenuClick, this);
                }
                this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx", shadow : shadow });
                this.hmenu.add(
                    {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
                    {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
                );
                if(g.enableColumnHide !== false){
                    this.hmenu.add('-',
                        {id:"columns", 
                         text: 
                         this.columnsText, 
                         hideOnClick: false,
                         menu: this.colMenu, 
                         iconCls: 'x-cols-icon'
                    });
                }
                this.hmenu.on("itemclick", this.handleHdMenuClick, this);
    
                //g.on("headercontextmenu", this.handleHdCtx, this);
            }
    
            if(g.trackMouseOver){
                this.mainBody.on("mouseover", this.onRowOver, this);
                this.mainBody.on("mouseout", this.onRowOut, this);
            }
            if(g.enableDragDrop || g.enableDrag){
                this.dragZone = new Ext.grid.GridDragZone(g, {
                    ddGroup : g.ddGroup || 'GridDD'
                });
            }
    
            this.updateHeaderSortState();
    
        }
    });
    Then, you can set the shim and shadow options on the viewConfig:

    Code:
    viewConfig: {
                forceFit        :true,
                enableRowBody   :false,
                autoFill        :true,
                showPreview     :false,
                shadow          :false,
    Last edited by mystix; 13 Jun 2009 at 7:03 AM. Reason: highlighted changes in red for readability
    "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.


Posting Permissions

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