Results 1 to 7 of 7

Thread: Shifted modal window mask

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jul 2008
    Location
    Czech republic
    Posts
    64
    Vote Rating
    1
      0  

    Default Shifted modal window mask

    Ext version tested:
    • Ext 4.1.0


    Browser versions tested against:
    • Chrome 22
    • Firefox 14


    Description:
    • Reopening of modal window cause wrong rendering of mask


    Steps to reproduce the problem:
    • I have a main window. I open new window, which I created as a child of the main window. I want to mask only the main window - so far everything works fine.
    • When I close the second window and open it again, mask is sideway of the main window. The second window is opened through node tree context menu.


    The result that was expected:
    • Mask should be always over the main (parent) window.


    The result that occurs instead:
    • Mask is shifted to right and bottom (I thing rendering cause double margin).


    Test Case:

    Code:
    Code:
           
           var me = this,
                formWindow = me.getParentWindow().add(Ext.widget('windowform'), {modal : true});
            formWindow.show();



    Screenshot or Video:



    Debugging already done:
    • none


    Possible fix:
    • not provided


    Additional CSS used:
    • default ext-all.css


    Operating System:
    • Windows 7

  2. #2
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
      0  

    Default

    it there any reason you create second window as child of parent window?

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,381
    Vote Rating
    858
      0  

    Default

    Please post a full test case that we can run, there's not really enough information here.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Jul 2008
    Location
    Czech republic
    Posts
    64
    Vote Rating
    1
      0  

    Default

    Hello,
    the reason, why I created second window as a child of the first one is, that I have a web desktop with many windows in it. In some windows there is a possibility to call another window (with settings or something) and I want to have this window modal, but only for the parent window, not for whole web desktop.

    I created a very simple test case. Try to call context menu of tree root, call the second window, close it and repeat it all again. The mask will move right and bottom every time you open the second window.

    HTML Code:
    Ext.require([
        'Ext.window.Window',
        'Ext.tree.Panel',
        'Ext.menu.Menu'
    ]);
    
    Ext.onReady(function() {
        var store = Ext.create('Ext.data.TreeStore', {
            root: {
                text: 'root',
                id: 0
            }
        });
    
        var tree = Ext.create('Ext.tree.Panel', {
            xtype : 'treepanel',
            store : store
        });
    
        var win1 = Ext.create('Ext.Window', {
            title: 'Test',
            width: 400,
            height: 200,
            x : 20,
            y : 20,
            layout : 'fit',
            items: [tree]
        });
        win1.show();
    
        var menu = Ext.create('Ext.menu.Menu', {
            items : [{
                text : 'click me',
                handler : function() {
                    var win2 = Ext.create('Ext.Window', {
                        title: 'Sub',
                        width: 200,
                        height: 100,
                        modal: true
                    });
                    win1.add(win2);
                    win2.show();
                }
            }]
        });
    
        tree.on('itemcontextmenu', function(view, rec, node, index, e) {
            e.stopEvent();
            menu.showAt(e.getXY());
        });
    });

  5. #5
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
      0  

    Default

    Thanks for your test case. I tested the issue, it does exist in 4.1.0. However, it was fixed in 4.1.1, 4.1.2, 4.1.3

    I tested in following browsers

    Firefox 16.0.2
    Chrome 22.0.1229.94

    in 4.1.0, both Firefox and Chrome have this issue

    Would you like to upgrade you ExtJs?

  6. #6
    Sencha User
    Join Date
    Jul 2008
    Location
    Czech republic
    Posts
    64
    Vote Rating
    1
      0  

    Default

    I'd like to, but I'm not a subscriber So I have no access to this versions of Ext. Right now I just play around of ExtJS 4.

  7. #7
    Sencha User kevin.chen's Avatar
    Join Date
    Sep 2012
    Location
    Redwood City, CA
    Posts
    242
    Vote Rating
    6
      0  

    Default

    once you upgrade, it should be fine. Stay tuned

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
  •