PDA

View Full Version : [UNKNOWN][3.0.0] Dynamic script loading and ExtJs problem in IE



Mikhus
30 Jul 2009, 11:00 AM
Version: extjs 3.0.0
Problem description:

I'm trying to create dynamic loading for my application resources. First of all it's needed to be able to manage loading of different resources including scripts.
The main problem is that ExtJs using document.write function to handle Ext.onReady event in this way:


function initDocReady(){
var COMPLETE = "complete";

docReadyEvent = new Ext.util.Event();
if (Ext.isGecko || Ext.isOpera) {
DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);
} else if (Ext.isIE){
DOC.write("<s"+'cript id=' + IEDEFERED + ' defer="defer" src="/'+'/:"></s'+"cript>");
DOC.getElementById( IEDEFERED).onreadystatechange = function(){
if(this.readyState == COMPLETE){
fireDocReady();
}
};
} else if (Ext.isWebKit){
docReadyProcId = setInterval(function(){
if(DOC.readyState == COMPLETE) {
fireDocReady();
}
}, 10);
}
// no matter what, make sure it fires on load
E.on(WINDOW, "load", fireDocReady);
};The essence of problem that it brakes a document if you'll try to load ext-all-debug.js with dynamic loading via creating DOM script tag. Let's imaging that we can do dynamic loading in the following way (the code below is only for example to reproduce a problem):


<html>
<head>
<script type="text/javascript">
function load( url, callback) {
var script = document.createElement( 'script');
script.src = url;
script.type = 'text/javascript';
script.onload = script.onreadystatechange = function(e) {
if (e || this.readyState == 'loaded') {
if (typeof( callback) == 'function') callback();
}
};
document.getElementsByTagName( 'head')[0].appendChild( script);
};

load( '/scripts/extjs/adapter/ext/ext-base-debug.js', function() {
load( '/scripts/extjs/ext-all-debug.js', function() {
Ext.onReady(function() {
Ext.QuiqTips.init();
alert( 'ExtJs sucessfully loaded!');
});
});
});
</script>
</head>

<body>
<h1>Hello, World!</h1>
</body>
</html>This will work in any browser except IE, in which you'll get your document replaced with:


<script id=ie-deferred-loader defer="defer" src="//:"></script>As I said this happens in case ExtJs using document.write, and such behavior is a known problem.
So the only solution I could found is to change ExtJs code itself:


function initDocReady(){
var COMPLETE = "complete";

docReadyEvent = new Ext.util.Event();
if (Ext.isGecko || Ext.isOpera) {
DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);
} else if (Ext.isIE){
var script = DOC.createElement( 'script');
script.id = IEDEFERED;
script.src = '//:';
script.defer = 'defer';
script.onreadystatechange = function(){
if(this.readyState == 'loaded'){
fireDocReady();
}
};
DOC.getElementsByTagName( 'head')[0].appendChild( script);
} else if (Ext.isWebKit){
docReadyProcId = setInterval(function(){
if(DOC.readyState == COMPLETE) {
fireDocReady();
}
}, 10);
}
// no matter what, make sure it fires on load
E.on(WINDOW, "load", fireDocReady);
};But such solution looks like I fixing bug in Ext library, so that's why I reporting it here. Please, let me know your suggestions and tell me is it really a bug and will it be fixed in future releases.

Thank you in advance,
Mike

Condor
30 Jul 2009, 11:33 AM
The entire onReady code is up for a rewrite (see here for current suggestions (http://www.extjs.com/forum/showthread.php?t=72159)).

Mikhus
30 Jul 2009, 12:34 PM
Thanks for reply. Hope it will be fixed in the next release, I'd prefer not to change the library code myself in my project :)

shocko
27 Nov 2011, 11:08 AM
Hi,
When you say 'breaks the page' could you elborate a little on what you mean? Does the page not load at all or only partially load or the like?