Results 1 to 7 of 7

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

    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
      0  

    Default 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 User
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    86
    Vote Rating
    5
      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
      0  

    Default

    Done

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    86
    Vote Rating
    5
      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
      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 User
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    86
    Vote Rating
    5
      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 User
    Join Date
    Jun 2011
    Location
    Boston
    Posts
    86
    Vote Rating
    5
      0  

    Default

    This has been fixed in 4.0.5.

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
  •