PDA

View Full Version : [OPEN] [FIXED-97][3.0RC3] Combo in modal window with card layout doesn't show list



deanna
1 Jul 2009, 5:42 PM
Ext version tested:

Ext version tested:



Ext 3RC3




Browser versions tested against:



Google Chrome

IE8

FF3.5 (firebug 1.4.0.b3 installed)





Operating System:



WinXP





Description:



When creating a modal wizard from a Ext.Window with a card layout, the drop down list in a combo box does not show. It appears the list has a z-index of 11000 which is behind the modal window and card page which is at 11103.

mjlecomte
1 Jul 2009, 6:01 PM
Thanks for the report. It would be very helpful if you could post a test case:
http://extjs.com/forum/showthread.php?t=71015

deanna
1 Jul 2009, 6:11 PM
It will take me a bit to come up with a test case. I'll do it when I can get a break from the production work I have to get out.

BTW: the workaround for it is add this style to your style sheet

.combo-bug-fix {
z-index: 30000;
}

and add this attribute to the combo config

listClass:'combo-bug-fix'

Of course that is not a reliable fix for all cases as the z-index of the list should be derived from the z-index of the container of the combo. But it got me past the bug to continue working. I'll post a test case soon.

mjlecomte
1 Jul 2009, 6:17 PM
Yeah, I posted elsewhere the idea that maybe we should have a layer manager to keep track of all these z-index values. Some classes, especially ux, will throw out whatever z-index they want and then they don't play nicely with other widgets.
RC3 will have a short lifespan so posting your testcase would be helpful.

mystix
1 Jul 2009, 6:51 PM
Yeah, I posted elsewhere the idea that maybe we should have a layer manager to keep track of all these z-index values.

or we could avoid the need for a zIndex manager by simply providing a getZIndex() method at the Component level so child Components can inspect their parents' zIndex when calculating their own. do you have a link to your FR? i'd like to throw this idea into the mix.

mjlecomte
1 Jul 2009, 7:01 PM
or we could avoid the need for a zIndex manager by simply providing a getZIndex() method at the Component level so child Components can inspect their parents' zIndex when calculating their own. do you have a link to your FR? i'd like to throw this idea into the mix.

I think the discussion was in miscellaneous threads and PM's. This thread is in bugs at the moment: http://extjs.com/forum/showthread.php?p=328852#post328852

I had also mentioned maybe we openly formulate / document what the various z-index levels are so people can manage better. Otherwise Joe Blow sets his z-index to 345,667 so he knows his stuff is on top.

deanna
1 Jul 2009, 7:27 PM
In order to simulate some of the complexity of the layout that causes extjs to set the z index up to 11100 when modal, I had to create a windowGroup to make the test case simple. As a note: I'm not messing with the z-index in my app at all, just the layout required by the client is a bit complex.

Attached is the test case

mjlecomte
1 Jul 2009, 8:30 PM
So here's the condensed test case and associated screenshot. I think this constitutes as a DUP of the other thread mentioned (http://extjs.com/forum/showthread.php?p=328852#post328852).



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Combo Transform</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){

var winGrp = new Ext.WindowGroup(); // To fake the complexity of our layout
winGrp.zseed = 11100;

win = new Ext.Window({
width: 200,
height: 70,
manager: winGrp,
modal: true,
layout: 'anchor',
items: [{
xtype: 'combo',
store: ['item 1', 'item 2', 'item 3', 'item 4'],
mode: 'local'
}]
}).show();
});
</script>

</head>
<body>
<h1>Modal Window</h1>
</body>
</html>

Animal
2 Jul 2009, 1:44 AM
A simple workaround:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Combo Transform</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){

var winGrp = new Ext.WindowGroup(); // To fake the complexity of our layout
winGrp.zseed = 11100;

win = new Ext.Window({
width: 200,
height: 70,
manager: winGrp,
modal: true,
layout: 'anchor',
items: [{
xtype: 'combo',
store: ['item 1', 'item 2', 'item 3', 'item 4'],
mode: 'local',
getListParent: function() {
return win.el;
}
}]
}).show();
});
</script>

</head>
<body>
<h1>Modal Window</h1>
</body>
</html>

mystix
2 Jul 2009, 1:49 AM
would it make sense for getListParent() to be this instead?


Ext.override(Ext.form.ComboBox, {
getListParent : function() {
var ct = this.ownerCt;

return ct ? ct.getEl() : document.body;
}
});

Animal
2 Jul 2009, 2:05 AM
That might (probably won't) yield a suitable Element.

Maybe a long term solution would be to search for the closest possible parent element which will accomodate a position:absolute Layer (which is what the list is) without clipping it on overflow.

I don't know if older browsers will return the computed style properly though. This works on FF3, Chrome and IE8:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Combo Transform</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.DomQuery.pseudos.listParent = function(a) {
for (var i = 0; i < a.length; i++) {
var e = Ext.get(a[i]);
if ((e.getStyle("position") !== "static") && (e.getStyle("overflow") == "visible")) {
return [ e.dom ];
}
}
}

Ext.onReady(function(){

var winGrp = new Ext.WindowGroup(); // To fake the complexity of our layout
winGrp.zseed = 11100;

win = new Ext.Window({
width: 200,
height: 70,
manager: winGrp,
modal: true,
layout: 'anchor',
items: [{
xtype: 'combo',
store: ['item 1', 'item 2', 'item 3', 'item 4'],
mode: 'local',
getListParent: function() {
return this.wrap.up("div:listParent", document.body);
}
}]
}).show();
});
</script>

</head>
<body>
<h1>Modal Window</h1>
</body>
</html>

mjlecomte
2 Jul 2009, 3:19 AM
The docs for combo illustrate using something like that actually:
http://extjs.com/deploy/ext-3.0-rc3/docs/?class=Ext.form.ComboBox&member=getListParent

manduks
29 Jul 2009, 5:49 PM
ichigo it did not work form me I used the css work aroud, but still does not work fine at list it appears in front :D,
you can see my test case in

http://extjs.com/forum/showthread.php?p=365354#post365354

th thing here is that when I select an item of the toolbar the toolbar closes automatickly :(

aconran
30 Oct 2009, 12:44 PM
As a temporary fix I've given the list a more sensible default zindex.

We are beginning to think about a more intelligent solution for managing zIndices across the board within Ext.