PDA

View Full Version : [CLOSED] ComboBox dropdown and z-index



cwolcott
May 07, 2015, 12:33 PM
I have a window that contains a dropdown. For other reasons I had to assign the Window a z-index. This has now caused the dropdown on the window to show behind the window. The example below demonstrates the following:


A Window/ComboBox without any z-index assignment (Works Perfectly)
A Window with a z-index assignment and a ComboBox items without a z-index assignment (DropDown shows behind window)
A Window/ComboBox items with z-index assignment (Works)


I have two questions:

Is this the correct approach to have the DropDown show in front of the window?
Clicking on the dropdowns in different order gives different results.

Try 3rd (shows in Front), 2nd (shows in Front), 3rd (shows in Front), 2nd (shows in Back)
Try 1st (shows in Front), 2nd (shows in Front), 3rd (won't show)
Try 2nd (shows in Back), 3rd (shows in Front), 1st (shows in Front), know 2nd or 3rd won't show




23964


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">

</script>
<head runat="server">
<title>Z-Index and Dropdowns</title>
<style type="text/css">
.x-window.specialDialog2 {
z-index: 30100 !important;
}
.x-window.specialDialog3 {
z-index: 30150 !important;
}
.specialDialogDropDown {
z-index: 30200 !important;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Window ID="W1" runat="server" Width="200" Height="60" Title="Without Z-Index" X="20" Y="20">
<Items>
<ext:ComboBox ID="WC1" runat="server" Width="50" Editable="false">
<Items>
<ext:ListItem Text="10" />
<ext:ListItem Text="25" />
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
<ext:ListItem Text="250" />
<ext:ListItem Text="500" />
</Items>
<SelectedItems>
<ext:ListItem Value="25" />
</SelectedItems>

</ext:ComboBox>
</Items>
</ext:Window>
<ext:Window ID="W2" runat="server" Width="200" Height="60" Title="Window With Z-Index only" Cls="specialDialog2" X="240" Y="20">
<Items>
<ext:ComboBox ID="WC2" runat="server" Width="50" Editable="false">
<Items>
<ext:ListItem Text="10" />
<ext:ListItem Text="25" />
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
<ext:ListItem Text="250" />
<ext:ListItem Text="500" />
</Items>
<SelectedItems>
<ext:ListItem Value="25" />
</SelectedItems>

</ext:ComboBox>
</Items>
</ext:Window>
<ext:Window ID="W3" runat="server" Width="200" Height="60" Title="Window With Z-Index + DropDown z-index" Cls="specialDialog3" X="460" Y="20">
<Items>
<ext:ComboBox ID="WC3" runat="server" Width="50" Editable="false">
<Items>
<ext:ListItem Text="10" />
<ext:ListItem Text="25" />
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
<ext:ListItem Text="250" />
<ext:ListItem Text="500" />
</Items>
<ListConfig runat="server" Cls="specialDialogDropDown" />
<SelectedItems>
<ext:ListItem Value="25" />
</SelectedItems>
</ext:ComboBox>
</Items>
</ext:Window>
</body>
</html>

Daniil
May 07, 2015, 9:24 PM
Hi Chris,

Yeah, it looks ZIndexManager (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ZIndexManager) cannot comprehend such a scenario.

I came up with the following. If you set a z-index on a component, then, probably, auto-managing of z-index should be disabled. There is no such an option built-in. So, this override adds an ingoreZIndexManaging setting.

Ext.ZIndexManager.override({
assignZIndices: function () {
var a = this.zIndexStack,
len = a.length,
i = 0,
zIndex = this.zseed,
comp,
topModal;

for (; i < len; i++) {
comp = a[i];
if (comp && !comp.hidden && !comp.ingoreZIndexManaging) { // added && !comp.ingoreZIndexManaging
zIndex = comp.setZIndex(zIndex);
if (comp.modal) {
topModal = comp;
}
}
}

if (topModal) {
this._showModalMask(topModal)
}
return zIndex;
}
});

You should set that ingoreZIndexManaging on each component which you manually set up a z-index to.
<ext:Window ... Cls="clsWithZIndex">
<CustomConfig>
<ext:ConfigItem Name="ingoreZIndexManaging" Value="true" Mode="Raw" />
</CustomConfig>
</Items>
</ext:Window>


<ext:ComboBox ...>
<ListConfig runat="server" Cls="clsWithZIndex">
<CustomConfig>
<ext:ConfigItem Name="ingoreZIndexManaging" Value="true" Mode="Raw" />
</CustomConfig>
</ListConfig>
</ext:ComboBox>

It appears to be working on initial testing. Hope this helps.

cwolcott
May 11, 2015, 5:53 PM
Thank you very much for the override. I will obviously try to avoid setting z-index on my components. It was just in the one cause of performing the Image Layer (http://forums.ext.net/showthread.php?55781-CLOSED-Image-Caption&p=258231&viewfull=1#post258231) that I had to set the z-index.

That caused me having to set the z-index for the menu that needed to be displayed on top of the image carousel and any window dialog that might appear above the image carousel.

Please close the thread.