Ext JS Dynamic Loading Examples

This page contains 4 examples demonstrating Ext JS 4's brand new class loading system. The best way to understand what is happening is to run the examples with firebug or the web inspector open and watch the AJAX requests being made to the server. Each example loads only the code it needs to run - from a single file for the first example to 6 files for the fourth.

Once a class has been loaded for one example it does not have to be loaded again for the other examples. Try running the examples in a different order to see which when each file is loaded and how Ext JS follows the dependency path to ensure that everything is loaded. The individual class files are all very simple and are linked to below:

1. Loading a single file

This example just loads a single file. Once it's loaded (from src/Product.js), we create a product instance with the newly-loaded class.

            Ext.require('Product', function() {
                var product = new Product();
                product.setName('Ext JS 4');
                
                alert("Product name: " + product.getName());
            });
        

2. Loading a file with dependencies

This time, we're asking Ext to load the SuperUser class (see src/SuperUser.js). SuperUser extends User (see src/User.js), which isn't loaded yet, so the loader will automatically load User first, then call our code.

            Ext.require('SuperUser', function() {
                var superUser = new SuperUser();
                superUser.setEmail('ed@sencha.com');
                
                alert("Is a SuperUser: " + superUser.isSuper());
            });
        

3. Mixins

This time we're going to mix functionality into a class using a mixin. We'll use the same User class as above to create the Developer class, to which we'll add the MadSkills mixin. The MadSkills mixin contains a function called hackAway, which will be added to Developer:

            Ext.require('Developer', function() {
                var dev = new Developer();
                dev.setEmail('tommy@sencha.com');
                dev.hackAway();
            });
        

4. Bringing it all together

Finally we'll demonstrate several aspects of the loader working in tandem. Our final class extends the Developer class we used above, mixing in the LeetSkills mixin as well as the earlier MadSkills mixin, and requires the CommitReverter class, which is used by the revertCommits function at the end of the example.

            Ext.require('Architect', function() {
                var ed = new Architect();
                
                //from the MadSkills mixin
                ed.hackAway();
                
                //from the LeetSkills mixin
                ed.makeItBetter();
                
                //from the RevertChanges requirement
                ed.revertCommits(2);
            });