PDA

View Full Version : Error with ext-all-debug.js (or ext-all.js) reported in Internet Explorer 8



kaendsle
17 Dec 2010, 11:23 AM
Ext version tested:


Ext 3.3.1
Ext 3.1.1



Adapter used:


ext
yui (Threw multiple new errors)
jquery
prototype (Threw multiple new errors)



css used:


ext-all-notheme.css
custom css (xtheme-tp.css grabbed from Sencha forums and modified)



Browser versions tested against:


Internet Explorer 8.0.7600.16385 (Windows Server 2008 R2 Standard)
Google Chrome 8.0.552.215 (Windows Server 2008 R2 Standard) - Worked fine
Firefox 3.6.11 (Windows Server 2008 R2 Standard) - Worked fine



Browser versions tested against on other (virtual) machines:


Firefox 3.6.13 (Ubuntu Linux, karmic, Firebug 1.6.0 installed) - Worked fine (Developed here)
Google Chrome 8.0.552.224 beta (Ubuntu Linux, karmic) - Worked fine
Opera 10.63 (Ubuntu Linux, karmic)
Internet Explorer 6.0.3790.3959 (Windows Server 2003 R2 Standard)



Operating System:


Microsoft Windows Server 2008 R2 Standard
Microsoft Windows XP



Description:


I'm serving the ExtJS application on my local machine's Apache server, and on our internal network I am looking at it from other (Windows) machines so I can optimize it for other browsers (in particular, Internet Explorer).
When I point Internet Explorer 8 at the web app (hosted on my machine), I get the following error:


'undefined' is null or not an object
ext-all-debug.js
Line: 36415
Char: 17
URI: http://geodjango.mtri.org/static/extjs/3.1.1/ext-all-debug.js

Test Case:
Note: the Ext.onReady({... script is in an external file (ui.js) and is very long



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

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="http://geodjango.mtri.org/static/extjs/3.3.1/resources/css/ext-all-notheme.css">
<link rel="stylesheet" type="text/css" href="media/ext/ext-3.2.1/resources/css/xtheme-tp.src.css">

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

<!-- overrides to base library -->
<script type="text/javascript" src="http://geodjango.mtri.org/static/extjs/3.1.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://geodjango.mtri.org/static/extjs/3.1.1/ext-all-debug.js"></script>

<!-- extensions -->
<script type="text/javascript" src="media/ext/Ext.ux.GMapPanel.src.js"></script>
<script type="text/javascript" src="media/ext/Ext.ux.iFramePanel.src.js"></script>
<script type="text/javascript" src="media/highcharts/Ext.ux.HighChart.src.js"></script>

<!-- page specific -->
<script type="text/javascript" src="media/highcharts/highcharts-adapter.src.js"></script>
<script type="text/javascript" src="http://geodjango.mtri.org/static/highcharts/2.1.1/js/highcharts.js"></script>
<script type="text/javascript" src="http://geodjango.mtri.org/static/highcharts/2.1.1/js/modules/exporting.js"></script>
<script type="text/javascript" src="media/js/ui.js"></script>
<script type="text/javascript" src="media/js/ui_content.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=ABQIAAAASbugl7pWfATo0xZnciHxcBSefWQA61pGJIOetNkBQIKFw_swLRTlF8mkDc1svLintP3DvcOuK63xww" type="text/javascript"></script>

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

Ext.onReady(function(){

//your onReady code here

}); //end onReady
*/
</script>

</head>
<body>
</body>
</html>
Steps to reproduce the problem:


As far as I see, the error is reported upon parsing the ext-all library, so it doesn't even matter what comes after importing that script.
With the right local files, the above code block reproduces the page (though slightly different stylistically) in the browsers the application has already been determined to work in.
The above code block still fails in Internet Explorer 8.



The result that was expected:


Display of the web application or an error associated with code I've written (not a library).



The result that occurs instead:


Internet Explorer reports an error with a part of the ExtJS library (versions 3.1.1 and 3.3.1, depending on which is used).



Screenshot or Video:23875


The error message from Internet Explorer (See attached: Sencha_bug_report_IE.jpg)
The way the application looks when it loads (properly) in Mozilla Firefox (See attached: Sencha_bug_report_proper.jpg)



Debugging already done:


Tried versions 3.1.1, 3.3.1, and 2.2.1 of the library
Versions 3.1.1 and 3.3.1 of the library produced the same error
Version 2.2.1 of the library produced a series of new errors (application was not designed for this version); haven't attempted to debug all of them to "degrade" to this version



Possible fix:


What is the name "undefined" supposed to be? Is it supposed to be null?

Animal
19 Dec 2010, 10:17 AM
I'd bet your code has a trailing comma.

Put it through jslint.

evant
19 Dec 2010, 2:36 PM
Almost definitely not a bug, @Animal is likely correct.

mankz
19 Dec 2010, 10:58 PM
Your HTML includes also look strange, using 2 sets of the Ext library...



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

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="http://geodjango.mtri.org/static/extjs/3.3.1/resources/css/ext-all-notheme.css">
<link rel="stylesheet" type="text/css" href="media/ext/ext-3.2.1/resources/css/xtheme-tp.src.css">

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

<!-- overrides to base library -->
<script type="text/javascript" src="http://geodjango.mtri.org/static/extjs/3.1.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://geodjango.mtri.org/static/extjs/3.1.1/ext-all-debug.js"></script>

kaendsle
20 Dec 2010, 7:09 AM
Your HTML includes also look strange, using 2 sets of the Ext library...



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

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="http://geodjango.mtri.org/static/extjs/3.3.1/resources/css/ext-all-notheme.css">
<link rel="stylesheet" type="text/css" href="media/ext/ext-3.2.1/resources/css/xtheme-tp.src.css">

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

<!-- overrides to base library -->
<script type="text/javascript" src="http://geodjango.mtri.org/static/extjs/3.1.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://geodjango.mtri.org/static/extjs/3.1.1/ext-all-debug.js"></script>




Yes, you're absolutely right. That's not actually what I use for production, but an attempt to fill out the the template that was provided to completeness. I only use the "overrides".

I am going through the motions with JS Lint right now. It isn't a trailing comma, however, because Internet Explorer took me through each one of those step by step, first.

Animal
20 Dec 2010, 7:45 AM
What does IE8's debugger tell you?

mschwartz
20 Dec 2010, 7:54 AM
What does IE8's debugger tell you?

It tells me to use a better browser.

kaendsle
20 Dec 2010, 8:09 AM
What does IE8's debugger tell you?

It points to this "offending" part of ext-all-debug.js (switched from mini version so I could locate it):


Ext.data.ArrayReader = Ext.extend(Ext.data.JsonReader, {
readRecords : function(o){
this.arrayData = o;
var s = this.meta,
sid = s ? Ext.num(s.idIndex, s.id) : null,
recordType = this.recordType,
fields = recordType.prototype.fields,
records = [],
success = true,
v;

var root = this.getRoot(o);

for(var i = 0, len = root.length; i < len; i++) {
var n = root[i],
values = {},
id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
for(var j = 0, jlen = fields.length; j < jlen; j++) {
var f = fields.items[j],
k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
v = n[k] !== undefined ? n[k] : f.defaultValue;
v = f.convert(v, n);
values[f.name] = v;
}
var record = new recordType(values, id);
record.json = n;
records[records.length] = record;
}


The "offending" line is the fourth line of the for... block, beginning id = ((sid... This suggests to me I need to look at some of my primitive arrays (used for ComboBoxes), but I'm not quite sure what error is being propagated.


It tells me to use a better browser.
I agree that the whole IE series is a mess, but our web application's user base consists overwhelmingly of "naive" users who use an IE browser.

mschwartz
20 Dec 2010, 8:17 AM
You should be able to look at the stack trace and see which of your code is calling into ExtJS and causing the error to happen.

Then you can set a breakpoint in your code and step into Ext and see where the arguments to functions being called go bad.

And the "better browser" comment was tongue in cheek :)

kaendsle
20 Dec 2010, 8:18 AM
Solved it; there was, in fact, an offending comma, but it was an array outside of my application and so wasn't parsed until runtime (I suppose). Thanks for pointing me in the right direction!

kaendsle
20 Dec 2010, 8:26 AM
You should be able to look at the stack trace and see which of your code is calling into ExtJS and causing the error to happen.

Then you can set a breakpoint in your code and step into Ext and see where the arguments to functions being called go bad.

Thanks; I don't have a lot of experience with IE Developer Tools but I can see they're going to be invaluable moving foward.

mschwartz
20 Dec 2010, 8:30 AM
Thanks; I don't have a lot of experience with IE Developer Tools but I can see they're going to be invaluable moving foward.

The developer tools make my machine crawl.

Instead, I use Visual Web Developer.

http://berniesumption.com/software/how-to-debug-javascript-in-internet-explorer/