Results 1 to 7 of 7

Thread: [CLOSED] Combo Z-Index issue

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Aug 2009
    Posts
    8

    Default [CLOSED] Combo Z-Index issue

    Ext version tested:
    • Ext 3.1.1
    • Ext 3.2.0


    Adapter used:
    • ext


    css used:
    • only default ext-all.css


    Browser versions tested against:
    • FF 3.6.3
    • Chrome 5.0.342.9


    Operating System:
    • WinXP


    Description:

    A combo dropdown has a mismatched z-index (too low) when attached to a window added to another window.
    In the test case, comboOut shows the dropdown when triggered, comboIn doesn't (the list is hidden as its z-index is a few points lower than required).

    Test Case:

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Title</title>
     
            <!-- ** CSS ** -->
            <!-- base library -->
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     
            <!-- overrides to base library -->
     
     
            <!-- ** Javascript ** -->
            <!-- base library -->
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
     
     
            <!-- overrides to base library -->
     
            <!-- extensions -->
     
            <!-- page specific -->
     
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
     
            Ext.onReady(function(){
     
        var comboIn = new Ext.form.ComboBox({
          typeAhead: true, triggerAction: 'all',
          mode: 'local',
          store: new Ext.data.ArrayStore({
            id: 0,
            fields: ['myId','displayText'],
            data: [[1, 'item1'], [2, 'item2']]
          }),
          valueField: 'myId', displayField: 'displayText'
        });
    
        var comboOut = new Ext.form.ComboBox({
          typeAhead: true, triggerAction: 'all',
          mode: 'local',
          store: new Ext.data.ArrayStore({
            id: 0,
            fields: ['myId','displayText'],
            data: [[1, 'item1'], [2, 'item2']]
          }),
          valueField: 'myId', displayField: 'displayText'
        });
    
        var winIn = new Ext.Window({
          height: 100, width: 200,
          items: [comboIn]
        });
    
        var winOut = new Ext.Window({
          height: 200, width: 300,
          items: [comboOut]
        });
    
        winOut.add(winIn);
    
        winOut.show();
        winIn.show();
     
            }); //end onReady
            </script>
     
        </head>
        <body>
        </body>
    </html>

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Adding a window to a window is very unusual.

    ComboBox will use the z-index of the inner window, but it should use the z-index of the outer window instead.

    You could fix this by specifying a different list parent for the inner combobox, e.g.
    Code:
    var comboIn = new Ext.form.ComboBox({
      ...
      getListParent: function(){
        return winOut.getEl();
      }
    });

  3. #3
    Sencha User
    Join Date
    Aug 2009
    Posts
    8

    Default

    Thanks Condor.

    I agree that attaching a window to another window is unusual in ExtJS, but actually it should be very usual if we want to design full-fledged GUIs functionally equivalent to normal desktop applications. In Windows that design paradigm is called MDI (Multiple Document Interface)...

    Honestly your proposed solution seems a bit patchy. Apparently, with previous versions of ExtJS the combo dropdown didn't suffer from this effect, so I would guess it's mainly related to some unmonitored changes in windows z-index handling. I'm not an expert in those internals, but perhaps would you suggest how to control a window's z-index so that it's higher than the one of the window it's attached to (or, better, of the body of the window it's attached to)?

    As a side comment, the introduction of a MDI window as an extension of a normal window would be worth considering (see http://www.extjs.com/forum/showthrea...zed-Window-MDI for further thoughts about issues to address, like avoiding that the child window would inherit styles form the outer window - maximized, etc).

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    That was only a temporary patch to get your example working.

    The correct patch should be something like:
    Code:
    Ext.override(Ext.form.ComboBox, {
        getParentZIndex : function(){
            var zindex = 0;
            if (this.ownerCt){
                this.findParentBy(function(ct){
                    zindex = Math.max(zindex, parseInt(ct.getPositionEl().getStyle('z-index'), 10));
                    //return !!zindex;
                });
            }
            return zindex;
        }
    });

  5. #5
    Sencha User
    Join Date
    Aug 2009
    Posts
    8

    Default

    Thanks Condor, appreciated.

    Any plans to address the MDI paradigm across the toolkit in the near future?

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    Yes, z-index management is being looked at for the next major release.

  7. #7
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    I've posted in the past that the whole guts of how ExtJS handles windows is messed up and really needs a redesign.

    Each window should be assigned a z-index at creation. The z-index should be the previous (topmost) window's z-index + 3. The window itself is rendered at z-index + 1. At z-index, you can mask everything behind the window. At z-index+2, you can mask the window.

    As it is implemented now (but I haven't checked lately), you have a serious problem if you open a modal window and a non-modal window. Activating either of those windows will push the other behind the mask!

    Use case for opening two such windows:

    Double click on a grid row, the grid lists a number of images. Double click should open an image editor. The editor might have a modal window for displaying the image, another non-modal window or two for floating toolbars (like PhotoShop or GIMP do).

    To be clear:

    window's zindex-1: mask all below it
    window's zindex: the window
    window's zindex+1: mask the window

    Why do you want to mask the window? If it has an iframe in it, the iframe will gobble up events that you really want Ext to handle. If you disable() the window, you want to mask just the window.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •