Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-3354 in a recent build.
  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    6
    Vote Rating
    0
    Farik is on a distinguished road

      0  

    Default Ext.menu.Menu positioning problem while scopeResetCSS:true

    Ext.menu.Menu positioning problem while scopeResetCSS:true


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.0.2 rev a

    Browser versions tested against:
    • Chrome 11.0.696
    • IE9
    • FF4.0.1
    • Opera 11.11

    Description:
    • Ext.menu.Menu positioning problem while scopeResetCSS:true

    Steps to reproduce the problem:
    • Enable scope reset option on Ext init.
    • Use sepecific css build with scope option
    • Try to call grid column menu by clicking on header menu icon.
    • or Try to use grid item context menu by custom hadler with menu positioning.

    The result that was expected:
    • Menu should appear near cursor

    The result that occurs instead:
    • In both cases meny shows on the top of the page(y coord = 0), but with proper x coord

    Test Case:

    Code:
     Ext = {buildSettings: {scopeResetCSS: true}};
    
     var contextMenu = Ext.create('Ext.menu.Menu', {
         items: [{text: 'Copy selected'}]
     });    
    
    Ext.define('My.grid', {
        extend:"Ext.grid.Panel",
        viewConfig: {
          listeners: {
                      itemcontextmenu: function(view, record, item, index, e) {
                          e.stopEvent();
                          contextMenu.showAt(e.getXY());
                          return false;
                      }
                  }
        }
    };


    HELPFUL INFORMATION


    Screenshot or Video:
    • none

    See this URL for live test case: none


    Debugging already done:
    • Coordinates are good(menu is showing near cursor) before Ext.menu.Menu.doConstrain call. Variable returnY have been reseted to 0 while parent element Y position has been checked. Parent element in cssReset mode is auto-generated div element with .x-reset class. It have zero height and full-sreen width. So then we trying to constrain our menu position IN this zero-height element - Y coord going to be reseted.

    Possible fix:
    • Code:
      Ext.menu.Menu.doConstrain : function() {
      ....
      if (me.floating) {
                  parentEl = Ext.fly(me.el.dom.parentNode);
                  if(me.resetEl && me.resetEl.dom == parentEl.dom) {
                    parentEl = Ext.getBody();
                  }
      ....

    Additional CSS used:
    • ext-all-scoped.css

    Operating System:
    • Windows 7
    Last edited by Farik; 24 Jun 2011 at 12:49 AM. Reason: formatted as bug

  2. #2
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    82
    Vote Rating
    4
    germanicus is on a distinguished road

      0  

    Default


    Thanks for the report, we've just introduced a new bug template that will help us migrate bugs from the forums to our bug tracker. Could you please update your ticket to follow this template so that we can address it faster?

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    6
    Vote Rating
    0
    Farik is on a distinguished road

      0  

    Default


    Done

  4. #4
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    82
    Vote Rating
    4
    germanicus is on a distinguished road

      0  

    Default


    Can you please clarify your test case? There's no way that this can work as you're overwriting the Ext global object here:

    Ext = {buildSettings: {scopeResetCSS: true}};

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    6
    Vote Rating
    0
    Farik is on a distinguished road

      0  

    Default


    Sorry, i don't actually mean this code as a strict test, just a key things for it.

    This modification of included example Toolbars and Menus::Ext Grid Actions(ext/examples/menu/action-grid.html) shows the problem:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Actions Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all-scoped.css" />
        <link rel="stylesheet" type="text/css" href="../shared/example.css" />
        <script type="text/javascript">Ext = {buildSettings: {scopeResetCSS: true}}</script>
        <script type="text/javascript" src="../../bootstrap.js"></script>
    
        <!-- page specific -->
        <style type="text/css">
            /* style rows on mouseover */
            .x-grid-row-over .x-grid-cell-inner {
                font-weight: bold;
            }
    
            /* Style the buyAction Components; Button and MenuItem */
            .buy-button {
                background-image: url(../shared/icons/fam/accept.png) !important;
    			background-repeat: no-repeat !important;
            }
        </style>
        
        <script type="text/javascript" src="action-grid.js"></script>
    </head>
    <body>
        Bla-bla. See <a href="action-grid.js">action-grid.js</a>.</p>
        <div id="grid-example"></div>
    </body>
    </html>

  6. #6
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    82
    Vote Rating
    4
    germanicus is on a distinguished road

      0  

    Default


    Ok, I verified this by setting:

    Code:
    <script>
    Ext.scopeResetCSS = true;
    </script>
    Note that you don't have to reference ext-all-scoped when using bootstrap.js. See the docs.

  7. #7
    Sencha - Ext JS Dev Team
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    82
    Vote Rating
    4
    germanicus is on a distinguished road

      0  

    Default


    This has been fixed in 4.0.5.

Thread Participants: 1

Tags for this Thread