PDA

View Full Version : [FIXED] Upgrade from 3.2.1 to 3.3.0 -> script in body broken



cgi-bin
28 Oct 2010, 8:19 AM
I updated the following files:
ext-all.js
adapter/ext/ext-base.js
css/ext-all.css

My main page breaks with:

Error: Ext.fly(d) is null
Source File: /js/ExtJS/ext-all.js
Line: 7

I ripped out most of my code, and eventually narrow it down that if I have any code in script tags in the body, I get the error... if all script in head, it works...

This Works:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<link rel="stylesheet" type="text/css" href="/css/ExtJS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/css/ExtJS/ext-overrides.css" />

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


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

Ext.onReady
(
function()
{
var viewport = new Ext.Viewport
({
layout: 'border',
items:
[
{
region: 'north',
height: 50,
margins: '3 3 3 3',
contentEl: 'north_content'
},
{
region: 'south',
height: 25,
margins: '3 3 3 3',
contentEl: 'south_content'
},
{
region: 'west',
header: false,
width: 200,
lines: false,
autoScroll: true,
margins: '0 3 0 3',
contentEl: 'west_content'
},
{
region: 'center',
margins: '0 3 0 0',
contentEl: 'center_content'
}
]
});

}
);
</script>
</head>
<body>

<div id="west_content" class="x-hide-display">
West Panel
</div>

<div id="north_content" class="x-hide-display">
Testing
</div>

<div id="center_content" class="x-hide-display">
Some sort of initial content would go here...
</div>

<div id="south_content" class="x-hide-display">
<p>footer/status/etc goes here...</p>
</div>
</body>
</html>

This gives Ext.fly() is null error:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<link rel="stylesheet" type="text/css" href="/css/ExtJS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/css/ExtJS/ext-overrides.css" />
</head>
<body>
<script type="text/javascript" src="/js/ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ExtJS/ext-all.js"></script>

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

Ext.onReady
(
function()
{
var viewport = new Ext.Viewport
({
layout: 'border',
items:
[
{
region: 'north',
height: 50,
margins: '3 3 3 3',
contentEl: 'north_content'
},
{
region: 'south',
height: 25,
margins: '3 3 3 3',
contentEl: 'south_content'
},
{
region: 'west',
header: false,
width: 200,
lines: false,
autoScroll: true,
margins: '0 3 0 3',
contentEl: 'west_content'
},
{
region: 'center',
margins: '0 3 0 0',
contentEl: 'center_content'
}
]
});

}
);
</script>

<div id="west_content" class="x-hide-display">
West Panel
</div>

<div id="north_content" class="x-hide-display">
Testing
</div>

<div id="center_content" class="x-hide-display">
Some sort of initial content would go here...
</div>

<div id="south_content" class="x-hide-display">
<p>footer/status/etc goes here...</p>
</div>
</body>
</html>
Very simply: the only difference is that the </head><body> tags were moved about 50 lines up or down.

Basically why I had the code tags in the body is that I was trying to use the load screen indicators, changing status messages at various stages. Very similar to how the ExtJS site itself uses loading masks.

cgi-bin
28 Oct 2010, 8:25 AM
Also, to be clear... BOTH examples worked in 3.2.1

jclawson
28 Oct 2010, 2:03 PM
I am currently debugging an issue related to Ext.onReady in an upgrade from 3.2 to 3.3. All I can say now is that It definitely functions differently. Ext.onReady seems to be firing before the document is completely loaded in FF and Chrome. It seems to work correctly in IE. From a quick glance, its likely this is your problem as well.

jclawson
28 Oct 2010, 2:31 PM
I found the bug. The offending change is on line 645 of EventManager.js:



/*
* Assert Ext.isReady here. If Ext is loaded after the document is ready, none of the native
* DOM onReady events will fire, because they have already passed.
*/
Ext.isReady = initExtCss();

if (!Ext.isReady) {
Ext.onReady(initExtCss);
}


This is setting Ext.isReady to true before the page is fully initialized. This causes Ext.onReady's that get added after to immediately execute even if the DOM is not fully ready. Sencha... please change this back to what it was in 3.2.1:


if(!initExtCss()){
Ext.onReady(initExtCss);
}

MakFracta
29 Oct 2010, 11:54 AM
I've found the same in IE 8. Some pages seems to work fine but on those with a lot of JavaScript references at the bottom, the onReady always triggers before the document loading is complete.

jclawson is right. If you comment the line:



/*
* Assert Ext.isReady here. If Ext is loaded after the document is ready, none of the native
* DOM onReady events will fire, because they have already passed.
*/

//!!!!COMMENT THIS LINE
//Ext.isReady = initExtCss();

if (!Ext.isReady) {
Ext.onReady(initExtCss);
}
Everything seems to works just fine until now. The page even seems to load faster.

If somebody wants a fast solution until the official realese you can find this code at line number 4882 of ext-all-debug.js, in this file there is no comment at all. Thanks

meroy
3 Nov 2010, 10:05 PM
This has been fixed in SVN after the 3.3 release.

kagupta@quark.com
2 Dec 2010, 11:19 PM
Is this fix available in ExtJS 3.3.1?

Thanks

Kapil

Condor
3 Dec 2010, 3:58 AM
Yes.