Ext.menu.Menu positioning problem while scopeResetCSS:true

**Farik** · 23 Jun 2011 5:13 AM

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

**germanicus** · 23 Jun 2011 1:20 PM

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?

**Farik** · 24 Jun 2011 12:49 AM

**germanicus** · 27 Jun 2011 4:40 PM

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}};

**Farik** · 28 Jun 2011 1:25 AM

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>

**germanicus** · 28 Jun 2011 10:39 PM

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.

**germanicus** · 2 Aug 2011 12:30 PM

This has been fixed in 4.0.5.

Ext.menu.Menu positioning problem while scopeResetCSS:true

Thread Tools

Search Thread

Display

Ext.menu.Menu positioning problem while scopeResetCSS:true

Ext.menu.Menu positioning problem while scopeResetCSS:true

Tags for this Thread