Results 1 to 7 of 7

Thread: 6.5.1 Classic: Menu + Window + Modal == broken menu

    You found a bug! We've classified it as EXTJS-26792 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    138

    Default 6.5.1 Classic: Menu + Window + Modal == broken menu

    In the following fiddle, if you click the "Modal" button, then the menu triggered by the "Menu" button becomes stuck once it is clicked.



    You can just click the modal button right when opening the example, and then expand the menu. This may or may not happen all the time. I tested this using latest google chrome (60.0.3112.113).

    What to expect in different web browsers:
    - Chrome: reproduces the issue
    - Internet Explorer 11: reproduces the issue
    - Firefox (latest): reproduces the issue
    - MS-Edge: does not reproduce the issue (at least I tried several times and couldn't)
    Last edited by fabricio.object; 21 Sep 2017 at 7:06 PM. Reason: reference to 'classic' framework!
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  2. #2
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    138

    Default

    Seems the menu's hidden property is not properly set when the modal MessageBox is displayed. If I changed the fiddle to this, I can click some times in the show and hide buttons to "address" the issue (in a very pragmatic way):



    EDIT: yes, I also tested, instead of using little messagebox modals, creating yet another window, with or without the modal setting, and then just calling its show/hide methods. It also breaks the menu. You don't need to interact with the menu at all, to break it down.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  3. #3
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    138

    Default

    Additional information: this is a bug with the z-index manager. When a component is hid (or destroyed), the z-Index manager 'front' object gets undefined, so when we try to select the button to expand the menu, it immediately switches back to the topMost component from the z-Index manager and focuses out of the button.

    But then a race condition enters, in which as it is triggered during the button menu's show event, the menu gets the 'hidden' property set back to 'true', its DOM element is effectively hid, BUT, the menu manager object gets the menu object into its list of currently visible menus. This brings an inconsistency where the menu is hidden by its 'hidden' property yet it is visible by the menu manager's 'visible' list.

    I hope this helps addressing the issue!
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Looks like a bug.

    FWIW, the "Modern" z-index management is much simpler and more elegant. There is no "Manager". Floated Components physically move up in the DOM stack to go above their peers.

    The example works fine in Modern!

    https://fiddle.sencha.com/#fiddle/278v&view/editor

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    6

    Default

    fabricio.object you are quite right. My solution for this problem is override on Ext.window.MessageBox on btnCallback function.

    Code:
    btnCallback: function(btn, event){
    
    this.callParent([btn, event]);
    
    if(this.zIndexManager.topMost)
    this.zIndexManager.front = this.zIndexManager.topMost;
    
    }
    
    Hope it helps someone.


  6. #6

    Default

    Works for me, thanks

  7. #7
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    6

    Default

    The problem was deeper then we expected.
    It occures on every modal window not only MessageBox.
    The final override is on ZIndexManager not on MessageBox .
    So far it solve the problem.

    Code:
    Ext.define('YourApp.overrides.ZIndexManager', {
        override: 'Ext.ZIndexManager',
        onCollectionSort: function() {
            var zIndex = this.callParent();
            if(!this.front && this.topMost)
                this.front = this.topMost;
            return zIndex;
        }
    });

Similar Threads

  1. problem with modal window and tree menu
    By tokkaido in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 6 Jan 2017, 8:46 AM
  2. Replies: 2
    Last Post: 7 Dec 2015, 4:04 PM
  3. Replies: 6
    Last Post: 14 Mar 2014, 9:55 AM
  4. How to make a modal menu or disable clicks outside the menu?
    By agunescu in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 11 Apr 2012, 6:33 AM
  5. zindex / layering problem with Ext.menu.Menu and Ext.Window
    By just_a_kid in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 27 Jan 2011, 7:34 AM

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
  •