I am developing a widget, and am using extJS framework (along with stomp,orbited servers). It requires 5 different Javascript files. To avoid impacting load time for users, I am trying to load them asynchronously.
Through some callback stacks, I have managed to asynchronously load them in order they are required.
However, the widget does not work at all in the asynchronous case. I then copied the "modified" resultant HTML DOM from Chrome's developer tools, and created a static HTML file.
The static file works. I am printing few alerts when different JS files are loaded in both cases. The order of these alerts is the same.
How do I detect and fix the error. Stumped after lot of debugging.
(Link removed as they were on production server. Managed to detect the issue and find a workaround - please see answer below - keeping for anyone's reference).
The problem is that Ext.onReady is called as soon as document is ready, which is BEFORE any other scripts are loaded asynchronously.
Thus, the initialization code was not getting called. I manage to work it around by calling Ext.each("dummy args", initialization_function, this) in the last javascript that is loaded. This made things work for me.