:::: MENU ::::

ExtJS 3.x : Dynamically loading javascript and css files

While developing large ExtJS applications, we often face a problem of including all the Javascript files together in the index file which sometimes leads to a really long loading time. I faced this problem when I was developing the ExtJS desktop application with around 25 different modules and 100s of Javascript and CSS files. It was not really possible to include all those files in the index file and moreover, it was really unnecessary to include all module files when each module will load only after a user event. So, a few core files along with the Ext library files were loaded at start and the rest of the files are dynamically invoked depending on the module type. I wrote a simple Script Manager to handle this dynamic loading of JS and CSS files.

Here is the class :

And it can be used this way:

For loading Javascript files,

scripts” can be an array of file paths or a string of single file path. “debug” true/false denotes whether the file can be debugged in firebug or not. Actually, while getting the content of the Javascript file by a XHR request, the code is executed either by window.execScript() or window.eval() function. Both these function will not list the file data in script section of firebug. But, if the file is added in DOM as a tag then it will be listed and any error can be seen in the firebug console by line number. However, debug true/false can be used either way without any side effect. The callback function is called only when all the files are loaded properly. You can see the XHR requests for loading JS file in Firebug while debug=false:

Loading javascript files - debug=false

CSS files can be loaded in similar way:

Dynamic loading of css file is not generally needed in a web application, but for specific cases where there are lots of CSS files, this functionality may be used. It also supports overriding an existing css by “id”. You can load a css file with a specific id. And then if you load another css file (or the same css file) with that id, the old file will be overriddedn Here is an example:

Load a css file file1.css with id file_to_be_overridden:

And then load another file file2.css with same id:

The file1.css file will be exluded and the file2.css will be included in the DOM.

Sometime we need to load a component only after user does some actions – for example, we want to open a window once user clicks a button. And this window is a pretty heavy component with lots of functionality and a large JS file. So, we can load that window dynamically this way:

I will update a jQuery version of this manager soon. Its very easy to load a JS file with ExtJS or jQuery but keeping a Script Manager at the top of your application makes things really easy and fast.

You can download all the source codes from here.

  • http://YourURL darkni8

    nice post….
    expecting somethng in java script…

  • http://swarnendude.com Swarnendu

    Will soon post a similar script manager in pure Javascript.

  • http://YourURL Julian Lasso

    I thank you for sharing this code, as I did with JavaScript libraries to include and include_once

    But I much prefer your code, thanks for sharing.

  • http://YourURL Sebastian Rondon

    Hi, does it works on extjs 4?

    • http://swarnendude.com Swarnendu

      You will not need this feature for ExtJS 4.0 as they are already providing a better mechanism for dynamically loading JS files. However, you can use the dynamic CSS loading functionality from this script – which comes handy sometimes to overwrite existing CSS file.

  • http://YourURL zaki

    Firstly, thank you very much for your good work.

    I use your code in extjs grouptabpanel (containing grid) inside zend framework environment. There is so many controllers (zend) and grid (js) files. In index.phtml there are two script tag calling the Ext.ux.ScriptManager.js and test.js. The test.js itself contain so many path to the grid.

    Unfortunately, the whole grid files is still loaded when the first page opened. My intention is to load the grid only when the panel tab clicked.

    Would you like to share any solutions and advices? Thanks in advance.

    • http://YourURL Swarnendu

      Hi Zaki,

      I think you are calling the “loadJs” function itself from the index.phtml file. If you want to load the files on an event, then you have to call this method on that event listener.

      Check the example I have given, I am calling “loadJs” function from a button handler. Similarly, you have to call this function only when the panel tab is clicked: may be on a “tabchange” event.

  • http://YourURL zaki

    Thanks for your quick reply, Swarnendu. I really appreciate that.

    Yes, you’re right. It was my fault by using ScriptMgr.loadJs() in test.js that called directly from index.phtml.

    Following your advice, so i just use that function inside listeners tabchange on the tabpanel. The problem is, the tabpanel (for example) containing items parameter (items: [languages_grid]). The languages_grid itself is defined inside js/languages_grid.js

    Then the result is “languages_grid is not defined”. I stil try to understand the problem. Are there anything related with callback function to return and get items: [languages_grid] ?

    Thanks again.

    • http://swarnendude.com Swarnendu

      Add the grid item on the fly inside Script Manager’s callback function and call a doLayout(); method on the parent.

  • http://YourURL seanrcoady

    What would be the equivalent of this in Sencha Touch 2? It looks like Ext.util.CSS is no longer supported.

  • http://YourURL ko0kiE

    great extension! I can definitely use some of it since we decided not to migrate to ExtJS4 for a while. thanks