PDA

View Full Version : Load of javascript pages in Ext.Window



ilfirovych
14 Oct 2009, 2:04 AM
Hi,

I have a problem with load of javascript pages in Ext.Window.
I'm creating Ext.Window (loadScripts is set to true), which loads some JSP page.
The loaded JSP page uses two (or more) script sources to load, for example javaScriptPage1.js and javaScriptPage2.js.



<script type="text/javascript" src="javaScriptPage1.js"></script>
<script type="text/javascript" src="javaScriptPage2.js"></script>


Notice that javaScriptPage2.js is loaded last one.

javaScriptPage2.js have the following:


Ext.onReady(function(){
..... //some logic of javaScriptPage2

//I need to run something from javaScripPage1.js,
//which should be already loaded
doSmthFromJavaScriptPage1();

..... //continue some logic of javaScriptPage2
});


The problem is that once in a while, java script error is risen that doSmthFromJavaScriptPage2 does not exist.

As far as I understand Updater gets javaScriptPage2.js before javaScriptPage1.js and starts to execute the script. Thus it hits doSmthFromJavaScriptPage1() before it been loaded.

There are two possible workarounds for this:
1. Merge all files - prefer not to, because they are divided according to internal logic.
2. Use setTimeout for launching JSP's Ext.onReady - also not the best solution since performance is crucial.

Does someone know how I can force Updater to load javascript pages in the posted order?
Is there any other workaround the this problem?

Thanks in advance,
Misha

14 Oct 2009, 3:40 AM
technically, you should merge the files and minify them for deployment purposes.

httpdotcom
14 Oct 2009, 6:07 AM
Unless the requirement for both files is conditional (ie. sometimes, the second file is not loaded at all).
Using a single file (probably non-JS in nature) to include one/both files would be the ideal.

PHP example using conditional for debugging
<?php
header( "Content-Type: text/javascript" ) ;
include "scripts/extjs/3.0/adapter/ext/ext-base.js" ;
if ( $_GET['debug'] ) {
include "scripts/extjs/3.0/ext-all-debug.js" ;
} else {
include "scripts/extjs/3.0/ext-all.js" ;
}
?>

referenced as <script type="text/javascript" src="ext.php?debug=1"></script>

14 Oct 2009, 6:10 AM
Unless the requirement for both files is conditional (ie. sometimes, the second file is not loaded at all).
Using a single file (probably non-JS in nature) to include one/both files would be the ideal.

PHP example using conditional for debugging
<?php
header( "Content-Type: text/javascript" ) ;
include "scripts/extjs/3.0/adapter/ext/ext-base.js" ;
if ( $_GET['debug'] ) {
include "scripts/extjs/3.0/ext-all-debug.js" ;
} else {
include "scripts/extjs/3.0/ext-all.js" ;
}
?>

referenced as <script type="text/javascript" src="ext.php?debug=1"></script>



What does this have to do with the poster's problem?

httpdotcom
14 Oct 2009, 11:29 AM
It was a response to your post that he should combine and minify. The code was merely an example of how to combine the files, adding condition logic, if required.

aw1zard2
14 Oct 2009, 11:37 AM
Using a technique like the example I posted keeps files in order for client side yet separate on server side.

Client side the browser just thinks ext.php is one huge javascript file when in fact it's 2 separate javascript files ext-base.js and ext-all.js combined.

I just use the condition for debugging things. When not debugging I use the minified files.

:)

hendricd
14 Oct 2009, 11:39 AM
What does this have to do with the poster's problem?

@Jay -- One might perceive @httpdotcom was offering an alternative -- given that there are no assurances that script execution for script[src] tags loaded into the DOM (after initial page load) will be deferred until all tags are fully loaded.

The Ext.Updater cannot control that (sequential) behavior with simple script[src] tag creation after page-load.

As @httpdotcom alludes too, OP will either have to :

- package up all the requisite script source for execution all-at-once in a single script tag
- use a more elaborate dynamic (yet sequential) script loading strategy ($JIT, YUI.get, etc).
- (recommended) replace his legacy load/autoLoad strategy with something more mature (component like).

:-?

oegozi
21 Dec 2009, 6:15 AM
Hi Doug,

I have the exact problem mentioned in the original post. The two files that I have cannot be combined since they have a separate logic (for example page1 may be included by other pages whereas page2 uses page1 but should not be used by others).

From your reply above and former replies I dont understand how exactly to apply the suggested solution. Can you specify examples to the solutions you suggested?

Thanks
Ora

hendricd
21 Dec 2009, 6:36 AM
Hi Doug,

I have the exact problem mentioned in the original post. The two files that I have cannot be combined since they have a separate logic (for example page1 may be included by other pages whereas page2 uses page1 but should not be used by others).

From your reply above and former replies I dont understand how exactly to apply the suggested solution. Can you specify examples to the solutions you suggested?

Thanks
Ora

@Ora -- Much would depend on what the dependencies implied by each 'module' actually are. :-?

I would normally recommend $JIT for dependency-based script processing as you'd get finer-grain control over when you call things (regardless of the order in which they arrive):



<script type="text/javascript" src="script1.js">
//source provided here
My.newclass = Ext.extend ( Ext.something, {} );
</script>


<script type="text/javascript" src="script2.js">
//source provided inline here
$JIT.onClassAvailable('My.newclass',
function(gotit){
if(gotit){
this.appWidget = new My.newclass(....);
} else {
complain();
}
},
window.My, //scope
15000 ); //wait 15 seconds max
</script>
..which keeps things async and fluid but -- it may require that you rethink how things are structured for your scenario.

oegozi
21 Dec 2009, 8:14 AM
Hi Doug,

I am not familiar with JIT, but I guess you meant something like this package:
http://www.felocity.org/blog/article/just_in_time_loader_for_javascript/
I tried using it but it doesnt have the onClassAvailbale method.
Can you provide some references to the specific JIT you mentioned.

By the way, I am using Extjs 2.2.1 with IE.

Thanks
Ora