PDA

View Full Version : [CLOSED] TabPanel mask hides Windows



softmachine2011
Aug 16, 2012, 10:19 AM
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:

Open a window
Move window above tabpanel
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.
4642

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
Aug 16, 2012, 10:22 AM
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
Aug 16, 2012, 11:49 AM
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
Aug 16, 2012, 12:24 PM
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
Aug 16, 2012, 1:46 PM
Ok, thanks for clarification.

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

softmachine2011
Aug 16, 2012, 1:51 PM
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
Aug 16, 2012, 5:31 PM
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
Aug 17, 2012, 7:55 AM
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
Aug 17, 2012, 8:07 AM
Ok, but I would keep an eye on this for a case when a mask will be somehow displayed atop the Window again.