PDA

View Full Version : DatePicker + HTML Select + IE6 Problem


ClayM
10 Aug 2007, 12:39 PM
I'm sure I'm simply not setting something correctly, but I've got the problem where the html select boxes are showing through the DatePicker object - it's probably a matter of the little iframe shim not being created - what do I need to do to fix this? I'm currently importing

yui-utilities.js
ext-yui-adapter.js
ext-all.js

Any help would be appreciated. Thanks!
evant
10 Aug 2007, 6:10 PM
Seems alright, care to post an online example somewhere?
ClayM
21 Aug 2007, 12:36 PM
it's pretty simple


<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="/js/ext-js/resources/css/ext-all.css">
<script type="text/javascript"
src="/js/ext-js/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript"
src="/js/ext-js/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/js/ext-js/ext-all-debug.js"></script>
<style>
#cal1Container {
display: block;
position: absolute;
left: 0px;
top: 0px;
z-index: 50
}
</style>
</head>
<body>
<div id="cal1Container"></div>
<select>
<option>This shows through the calendar</option>
</select>
<script>
var calendar;
Ext.onReady(function () {
calendar = new Ext.DatePicker();
calendar.on("select", this.updateInitLaunchDate, this, true);
calendar.setVisible(true);
calendar.render("cal1Container");
});
</script>
</body>
</html>


Does it have something to do with the style i'm applying to the div?

I'm using extjs 1.1 and IE 6.0.2900.2180
ClayM
29 Aug 2007, 4:37 PM
bump? anyone?
xsbr
30 Aug 2007, 5:40 AM
bump? anyone?

You really need an iframe to over the <SELECT>

Try:


Ext.onReady(function () {
calendar = new Ext.DatePicker();
calendar.on("select", this.updateInitLaunchDate, this, true);
calendar.setVisible(true);

calendar.shim = calendar.getEl().createShim();
calendar.shim.show();

calendar.render("cal1Container");
});Don't forget to remove/hide the shim on remove/hide the calendar

I didn't try it, please tell us if it works
ClayM
4 Sep 2007, 10:30 AM
It looks like

calendar.shim = calendar.getEl().createShim();
calendar.shim.show();

has to be done after the .render() call, but other than that, it looks like it works.