[CLOSED] TabPanel mask hides Windows

[softmachine2011]

Hi,

When you have a tabpanel and floating non-modal windows and adds a tab inside tabpanel, loading mask of tab appears above window and difficult user to interact with window at the same time.

I have prepared a test case

<script type="text/javascript">
    function openWindow(url) {
            var w = new Ext.Window({
            renderTo: Ext.getBody(),
            title: 'My Window',
            modal: false,
            resizable: true,
            maximizable: false,
            minimizable: false,
            collapsible: false,
            draggable: true,
            isMinimized: false,
            isMaximized: false,
            minimizePosition: -1,
            minWidth: 500,
            minHeight: 500,
            width: 500,
            height: 500,
            constrain: true,
            loader: {
                url: top.ResolveUrl(url),
                renderer: 'frame',
                disableCaching: true,
                loadMask: {
                    showMask: true,
                    msg: Ext.String.format('Loading my window...')
                },
            }
        });

        w.show();
    }

    function openTab(url) {
        if (Ext.isEmpty(url, false)) {
            return;
        }

        var tp = Ext.getCmp("sampleTabPanel");
        var tabId = url;
        var tab = tp.getComponent(tabId);

        if (!tab) {
            tab = tp.add({
                id: tabId,
                title: 'My Tab',
                closable: true,
                closeAction: 'close',
                loader: {
                    url: url,
                    renderer: 'frame',
                    noCache: true,
                    loadMask: {
                        showMask: true,
                        msg: 'Loading new tab...'
                    }
                }
            });

            tp.setActiveTab(tab);

            tab.addListener('activate', tab.syncSize);

        } else {
            tp.setActiveTab(tab);
            tab.fireEvent('activate');
            Ext.get(tab.tab.el).frame();
        }
    }
    </script>
    <ext:Button runat="server" Text="1 - Open Window">
        <Listeners>
            <Click Handler="openWindow('/Area/Sample/Detail');" />
        </Listeners>
    </ext:Button>
    <ext:Button runat="server" Text="2 - Open Tab">
        <Listeners>
            <Click Handler="openTab('/Area/Sample/Detail');" />
        </Listeners>
    </ext:Button>
    <ext:TabPanel ID="sampleTabPanel" runat="server" />

These are the steps to reproduce:

1. Open a window
2. Move window above tabpanel
3. Open a tab

Like you can see in the image mask of tabpanel is above window and you can not interact with window at this moment.


In v1.x with the same code mask appears behind window. I see that in extjs4 they added a z-index manager that could be the reason of this issue.
Any idea to solve it?

[softmachine2011]

Oh I forgot Detail page content but it could be anything like this in my test case:

<ext:Label runat="server" Text="This is detail text" />

[Daniil]

Hi,

Thanks for the sample, I reproduced.

But I am unsure what do you mean by this?

difficult user to interact with window at the same time.

Could you clarify?

I think a browser is not responsible well, because it loads an iframe.

[softmachine2011]

Hi,

Thanks for the sample, I reproduced.

But I am unsure what do you mean by this?



Could you clarify?

I think a browser is not responsible well, because it loads an iframe.

Well, if the user is working with the window an would open a tab while he still is working in the window, the mask make it impossible because locks a part of the window or entirely if window is all above tabpanel.

[Daniil]

Ok, thanks for clarification.

Generally, we agree that a mask should be behind the Window. We will investigate a possible fix or workaround.

[softmachine2011]

Ok, thanks for clarification.

Generally, we agree that a mask should be behind the Window. We will investigate a possible fix or workaround.

Ok I will wait for it

[Daniil]

We can suggest the following solution.

1. Replace

loadMask: {
    showMask: true,
    msg: 'Loading new tab...'
}

with

listeners: {
    beforeload: {
        fn: function(){
            tab.body.mask("Loading new tab...");
        },
        delay: 100
    },

    load: {
        fn : function () {
            tab.body.unmask();
        },
        delay: 100
    }
}

in the tab loader.

2. Set up this

<style type="text/css">
    .x-mask-msg{
        z-index:102;
    }
</style>

on the page.

[softmachine2011]

We can suggest the following solution.

1. Replace

loadMask: {
    showMask: true,
    msg: 'Loading new tab...'
}

with

listeners: {
    beforeload: {
        fn: function(){
            tab.body.mask("Loading new tab...");
        },
        delay: 100
    },

    load: {
        fn : function () {
            tab.body.unmask();
        },
        delay: 100
    }
}

in the tab loader.

2. Set up this

<style type="text/css">
    .x-mask-msg{
        z-index:102;
    }
</style>

on the page.

It works with or without this css

<style type="text/css">
    .x-mask-msg{
        z-index:102;
    }
</style>

Thanks

[Daniil]

Ok, but I would keep an eye on this for a case when a mask will be somehow displayed atop the Window again.