ExtJs Dynamic Script Loading

Hello,

When we are working with ExtJs or other JavaScript framework, we regularly face problem of dynamic script loading. If you have may JavaScript files and you don't want to load all the files at the same time. Sometimes on particular user action we want to load JavaScript files.  When you are working in multilingual sites, you want to load only user selected language file. (How to build multilingual site using JavaScript? Refer to my earlier post for it click here )

So how to load JavaScript files as per  demand? We can use ScriptLoader for that. This is a component, which you can use in any of your web application. You just need to attach component JavaScript file to your app and then you can use it.

You can check this file on Google code. Download the ScriptLoader

Download this file and attach it to your web app.

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

When this file is loaded it will create object of ScriptLoader.  Check the last line if JS file.

Ext.ux.ScriptMgr = new Ext.ux.ScriptLoaderMgr();

Now you can use above object to download any JavaScript file you want.

Ext.ux.ScriptMgr.ScriptMgr.load({
                             scripts : [
                                             'ExampleFile1.js',
                                             'ExampleFile2.js',
                                             'ExampleFile3.js'
                                         ],
                             callback : function() {
                                                     
                                            }
});

You can give any number of files you want in array. Callback function will be invloked when all the files are downloaded successfully. Remember that this is an asynchronous process, hence callback function is necessary if you want to trigger some events on successful download.

ScriptLoder can be used to dynamically load CSS files as well.