PDA

View Full Version : [UNKNOWN][3.1] global js var dom breaks ext base



KajaSheen
28 Dec 2009, 4:11 AM
Ext version tested:

Ext 3.1 rev 5770-119


Adapter used:

ext
yui


css used:

only default ext-all.css




Browser versions tested against:

IE8
FF3 (firebug 1.4.5 installed)
Safari 4


Operating System:

Win 7


Description:

I have a global function called "dom" (can be a var though too). During the initialization Something tried to attach an eventListener to this function (which obviously does not exist)


Test Case:
Run from examples/window


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<!-- ENDLIBS -->

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

<script language="javascript" src="hello.js"></script>

<script language="JavaScript" type="text/javascript">
<!--
dom = 123
-->
</script>


<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<h1>Hello World Window</h1>
<p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="hello.js">hello.js</a> for the full source code.</p>

<div id="hello-win" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<!-- Auto create tab 1 -->
<div class="x-tab" title="Hello World 1">
<p>Hello...</p>
</div>
<!-- Auto create tab 2 -->
<div class="x-tab" title="Hello World 2">
<p>... World!</p>
</div>
</div>
</div>
</body>
</html>



Steps to reproduce the problem:

Click on "Hello World" Button


The result that was expected:

That the window loads


The result that occurs instead:

Firebug: el.addEventListener is not a function
el.addEventListener(eventName, fn, (capture));\next-base-debug.js (Row 1190)



Debugging already done:

Removed the dom var from the code
Checked the type of "el" in the base adapter


Possible fix:

ext-base-debug (1189 - 1191)


} else if(typeof(el) == 'object') {
el.addEventListener(eventName, fn, (capture));
}

Condor
28 Dec 2009, 6:11 AM
Ext.getDom should contain (copied from Ext.get):

(function(){
var DOC = document;
Ext.apply(Ext, {
getDom : function(el){
if(!el || !DOC){
return null;
}
return el instanceof Ext.Element ? el.dom : (Ext.isString(el) ? DOC.getElementById(el) : el);
}
});
})();

Warning: This is not the only code instance that assumes that any object with a dom property is an Ext.Element.

KajaSheen
28 Dec 2009, 2:55 PM
Hey Condor,

after thinking a while I understand what you mean. Since declaring this var it makes "window" an Ext.Element since it has a property dom which is in that case not related to Ext? Am I right?

Then what would be the best way to fix this?

hendricd
28 Dec 2009, 3:22 PM
Hey Condor,

after thinking a while I understand what you mean. Since declaring this var it makes "window" an Ext.Element since it has a property dom which is in that case not related to Ext? Am I right?

Then what would be the best way to fix this?

@KajaSheen -- As Condor implies, the window and document objects are treated 'specially' by recent Ext builds. The implications of his solution are shall-we-say: far reaching. That said, it is on our list of issues to address in the next release 3.2+.

The short-term fix for you, would be to select an alternate global member (other than window.dom) or implement 'dom' within a closure (isolating it from the global namespace):




(function(){
var dom = someFunc;
.....

})();

KajaSheen
1 Jan 2010, 4:22 PM
Yeah,

I guess for now I will refactor the function, as I noticed some other glitches (automatic resizing of a viewport does not work either for example)

Thanks thou and continue the great work!

Best,
Kaja