Shifted modal window mask

[ondra.cz]

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:

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

Screenshot or Video:

• See attached ext4_modal_mask.jpg

Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• default ext-all.css

Operating System:

• Windows 7

[kevin.chen]

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

[evant]

Please post a full test case that we can run, there's not really enough information here.

[ondra.cz]

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.

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

[kevin.chen]

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?

[ondra.cz]

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.

[kevin.chen]

once you upgrade, it should be fine. Stay tuned