Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    May 2014
    Posts
    3

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

    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:

    Code:
    {
         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:

    Code:
    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

  2. 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:

    Code:
    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'
                    }]
                }]
            });
        }
    });

  3. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250
    Answers
    758

    Default

    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:

    Code:
    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'
                    }]
                }]
            });
        }
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3
    Sencha User
    Join Date
    May 2014
    Posts
    3

    Default

    Thanks evant, that definitely did the trick

Similar Threads

  1. The modal window mask theme is applied to other components.
    By Trevor4001 in forum Ext JS 6.x Bugs
    Replies: 0
    Last Post: 31 Mar 2017, 8:04 AM
  2. Replies: 1
    Last Post: 13 Oct 2016, 2:03 PM
  3. Replies: 8
    Last Post: 20 Feb 2014, 6:28 AM
  4. Modal window mask width problem - shows Hz scrollbar in parent window
    By satishp in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 27 May 2009, 11:46 PM

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
  •