PDA

View Full Version : The best way to load scripts dynamically (Extjs 3.3.1)



peterversnee
18 Jan 2011, 2:22 AM
Hi there,

You could say i'm quite a beginner, but not a newbie. However JS in general is not my strongest point.
I have an application which should load scripts dynamically. What is the best way to do so currently?

I have structured the application like this:
MyApp.js
which loads: MyPartialAppOne.js
which loads: AppOne_grid.js, AppOne_tabpanel.js, and some more

I know this option:


function AddScript(script) {
var ScriptTag = document.createElement('script');
ScriptTag.setAttribute("type","text/javascript")
ScriptTag.setAttribute("src", script);
document.getElementsByTagName("head")[0].appendChild(ScriptTag);
}
However I never know if it's loaded right, and de console doesn't get any errors from scripts loaded
by a dynamically loaded file.

Any suggestions where to look? I've been searching, so I either didn't recognize the right thread or
page, or it isn't there.

Thanks in advance for any reply.

fay
18 Jan 2011, 2:53 AM
Have you looked at Ext.Loader (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Loader)? (As suggested in the "Similar Threads" below)

18 Jan 2011, 3:38 AM
Look at Jingo module manager: http://code.google.com/p/jingo/wiki/GettingStarted. It manages inter-module dependencies too.

peterversnee
18 Jan 2011, 4:36 AM
@fay:
Jeez, my first reaction was: "How blind can I be?".
The actual answer was: the search option in de documentation doesn't provide this as an searchresult.
Bit weird, or is that normal?

@kalab:
I've just jumped into ExtJS. A quick peek makes this look like some other kind of framework. Maybe you could
explain a bit more (especially for future referrence, not for me though :) )

Thanks both for the quick answers.

fay
18 Jan 2011, 4:44 AM
You're right Peter, the API search isn't returning it. I've found this to be true of a couple of other ones as well (ButtonGroup and FlashComponent to name two). The thing about being "blind to it" is that the "Similar Threads" obviously can't come up until you've posted your question... :)

18 Jan 2011, 4:58 AM
I currently use Jingo as a module loader for my application. It does not depend on a specific JS framework, uses only clear JS/JSON syntax for module declaration.

for example:

- define module with dependencies:


jingo.declare({
name: "module1",
require: ['module2', 'module3'],
as: function(){
App.Modules.module1 = function(){
return {
action: function(){
window.alert('I am module 1');
}
};
}();
}
});
- use the module:


jingo.anonymous({
require: ["module1"],
exex: function(){
App.Modules.module1.action();
}
});

It looks up for modules in a preconfigured location, automatically declares namespaces by the module name, uses specific module pattern as interface.

19 Jan 2011, 11:36 PM
Ext JS 4 Dynamic class loading:
http://www.sencha.com/blog/2011/01/19/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+extblog+%28Ext+JS+Blog%29