Ext.window.Window mask is applied to all tabs in a TabPanel

[JesusMF]

I've got a tab panel with two tabs and one of them is a panel (let's say its id is 'myPanel') with a button that shows an Ext.window.Window when clicked.

The problem is that if I configure the window like this:

{
     modal: true,
     renderTo: 'myPanel',
     constrainTo: 'myPanel'
}

the mask displayed is applied not only to the current tab but also to the others.

Debugging the code I saw the mask is created in Ext.ZIndexManager -> showModalMask:

showModalMask: function(comp) {
            var me = this,
                compEl = comp.el,
                maskTarget = comp.floatParent ? comp.floatParent.getEl() : comp.container,
                mask = me.mask;
            if (!mask) {
                // Create the mask at zero size so that it does not affect upcoming target measurements.
                me.mask = mask = Ext.getBody().createChild({
        ...........

I think this issue could be solved with this fix:

me.mask = mask = (Ext.get(comp.renderTo) || Ext.getBody()).createChild({


Please have a look at this fiddle to check it by yourselves:

https://fiddle.sencha.com/#view/editor&fiddle/250c

[evant]

By using renderTo, we have no knowledge of when the thing that is holding the mask is hidden or shown.

You should do something like this:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var pnl = Ext.create('Ext.TabPanel', {
            title: 'My Tab Panel',
            width: 500,
            height: 500,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                title: 'First tab',
                xtype: 'panel',
                id: 'windowPanel',
                items: [{
                    xtype: 'button',
                    text: 'show window',
                    handler: function() {
                        var window = Ext.getCmp('myWindow');

                        if (!window) {
                            window = Ext.getCmp('windowPanel').add({
                                xtype: 'window',
                                maxWidth: 450,
                                constrain: true,
                                title: 'dummy window',
                                constrainTo: 'windowPanel',
                                closeAction: 'hide',
                                id: 'myWindow',
                                modal: true,
                                html: 'The mask of the window should be applied only to this tab because the renderTo and constrainTo configs are set with the tab\'s id.'
                            });
                        }

                        window.show();
                    }
                }]
            }, {
                title: 'Second tab',
                xtype: 'container',
                items: [{
                    xtype: 'button',
                    text: 'dummy button'
                }]
            }]
        });
    }
});

[JesusMF]

Thanks evant, that definitely did the trick