Hybrid View

    You found a bug! We've classified it as EXTJS-7264 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default [4.1.2] Menu size too large on first show

    [4.1.2] Menu size too large on first show


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.1.2
    • Ext 4.1.1
    • Ext 4.1.0
    Browser versions tested against:
    • FF 15.0.1
    Description:
    • In Firefox on occasion, the first time a menu is shown on the page the menu container is laid out too large for its child menu items. This seems to be cache-related, as it only consistently happens after the page is loaded via Ctrl-F5 or the browser cache has been cleared/disabled. In addition, it appears to be a problem introduced in 4.1.x, as it is not reproducible on 4.0.7 and earlier.
    Steps to reproduce the problem:
    • Create a button menu with a few simple menu items.
    • Open in Firefox, and reload the page using Ctrl-F5.
    • Click the button to open the menu.
    The result that was expected:
    • The menu should be sized appropriately for the child menu items.
    The result that occurs instead:
    • The menu is larger than expected for the child items. However, clicking the button to show the menu subsequent times shows the menu layout as expected.
    Test Case:
    Code:
    Ext.onReady(function() {
        Ext.create('Ext.button.Button', {
            text: 'Test',
            margin: 10,
            renderTo: Ext.getBody(),
            
            menu: {
                listeners: {
                    beforeshow: function() {
                        var el = this.child().arrowEl;
                        console.log('Arrow width: ' + el.getWidth());
                        console.log('Arrow height: ' + el.getHeight());
                    }
                },
                items: [{
                    text: 'Menu Item 1'
                }, {
                    text: 'Menu Item 2'
                }, {
                    text: 'Menu Item 3'
                }]
            }
        });
    });
    HELPFUL INFORMATION
    Screenshot or Video: Debugging already done:
    • This appears to be an issue with the "arrowEl" element in the menu items. The information logged to the console in the test case looks like this:
      Arrow width: 24
      Arrow height: 24
      Arrow width: 1
      Arrow height: 1
      Arrow width: 1
      Arrow height: 1
    • The issue appears to be that the blank arrow image is not yet loaded by the time the first layout is run, causing the arrowEl to report a larger size than it actually occupies once the 1px by 1px blank image is loaded.
    Possible fix:
    • Hide or remove the arrowEl element from the DOM when it is not needed (i.e. when the menu item has no submenu). This override is one such solution, applying the "x-hidden" class to the arrow element when no submenu is specified:
      Code:
      Ext.define('Ext.ux.overrides.MenuArrow', {
          override: 'Ext.menu.Item',
          
          beforeRender: function() {
              if (!this.menu) {
                  Ext.applyIf(this.renderData, {
                      arrowCls: 'x-hidden'
                  });
              }
              
              this.callParent();
          }
      });
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Win7 x64

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,064
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I can't reproduce this at all. Tried 20 times in a row, clearing the cache each time.

    I would usually see:

    Code:
    Arrow width: 0
    Arrow height: 14
    I would occasionally see:
    Code:
    Arrow width: 1
    Arrow height: 1
    Either way, the menu never looked like it did in your screenshot.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default


    Well, that's certainly interesting...

    Any idea what would be different? I'm just using the standard ext-all-debug.js and ext-all.css, so there's no custom code that would mess things up. I've tried running off the local filesystem and via webserver, with Firefox plugins disabled, and I still get this behavior.

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,064
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Nothing really springs to mind. Does it happen with FF14, or one of the FF nightlies?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    418
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default


    Just tried against Firefox 14 and the latest Nightly, both with clean new profiles, and I'm seeing this happen in those versions as well. I only have access to Windows machines though, so I can't try to reproduce in Firefox for other platforms (Mac or Linux).

Thread Participants: 3

Tags for this Thread