PDA

View Full Version : [FIXED-671] Ext 3.1.1 mask() an Ext Element with no id doesn't work in IE8?



yoh.suzuki
1 Mar 2010, 11:57 AM
Hello. I posted this question a while ago in Premium Help, but didn't receive any helpful answers, so I'm posting this to the community in hopes that someone else has encountered this.

I'm trying to mask(...) an Ext Element which corresponds to a DOM element that has no id. In IE8, this causes a problem and doesn't allow JavaScript execution to continue. It doesn't matter how I select the DOM element (I've tried Ext.select(...) and Ext.get(...)).

Adding an id to the element fixes the problem.

I'm using Ext 3.1.1.

Here's a sample.

In Firefox 3.5.8 and Chrome 4.0, both divs are masked correctly, and you can see that the two calls to alert() are executed.

In Internet Explorer 8, the first mask (on the div with the id) and the following call to alert() work correctly. The second mask (on the div without an id) does not appear to finish positioning the mask message, and execution never reaches the following call to alert().

(Of course, you will probably have to tweak the paths to the Ext script files and style sheets referenced in the sample...)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext 3.1.1 mask() an Ext Element with no id breaks in IE8?</title>

<link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/xtheme-gray.css" />
<style type="text/css">
div.this_div_has_an_id,
div.this_div_has_no_id
{
border:2px solid #ccc;
color:#000;
width:400px;
height:120px;
padding:5px;
margin:10px auto;
font-family:Verdana;
}
</style>

<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

var div_with_an_id = Ext.select("div.this_div_has_an_id").first();
var div_without_id = Ext.select("div.this_div_has_no_id").first();

// mask the first div and make sure execution continues
div_with_an_id.mask("masked");
alert("first alert successful.");

// mask the second div and notice that:
// 1) the mask is not correct in IE8, and
// 2) execution does not continue in IE8
div_without_id.mask("masked");
alert("second alert successful.");

});
</script>

</head>
<body>
<div class="this_div_has_an_id" id="someid">
In IE8, this div will be masked correctly and continue execution.
</div>
<div class="this_div_has_no_id">
In IE8, this div will be masked incorrectly and does not continue execution.
</div>
</body>
</html>


Thanks,

Yoh Suzuki

Jamie Avins
5 Mar 2010, 5:14 PM
[type]: fix
[module]: Element
[id]: #671
[desc]: Refs #671. Elements without and id that are passed to Element.get are now now longer passed to getElementById for IE.