Bleext
Loading classes dynamically with ExtJS4
Ext JS 4 introduces a simple way to load classes on demand, this will allow us to optimize the initial load of our application and only load the modules when the user requests.
In a previous tutorial I talked about the conventions we should follow in order to use in a very simple way the Ext.Loader, today I will show how to use it on our own project.
Configure the Paths
First we must define where our classes will be located, in languages like Java there is something called “classpath” which is where the classes we created are, in Ext4 there is a similar concept and to define the “path” we have to do the following:
Ext.Loader.setConfig({
enabled : true,
paths : {
Bleext : "js/Bleext"
}
});
In the previous code we enabled the Loader and assign it a path, from now on every time we load a class whose main namespace is “Bleext”, the Loader will look for the file in the folder “js/Bleext”.
We can also define more paths, for example:
Ext.Loader.setConfig({
enabled : true,
paths : {
Bleext : "js/Bleext",
CRM : "js/Crm"
}
});
Load classes dynamically
First of all let’s create the class so we can load it later, if you remember, one of the conventions is that the name of the file must be the same as the class, also the file must be located according to the namespace assigned. Let’s create a file in the “js/Bleext/training/UsuarioPanel.js” and then define the class as follows:
Ext.define("Bleext.training.UsuarioPanel",{
extend : "Ext.panel.Panel",
title : "User",
width : 300,
height : 250,
initComponent : function() {
var me = this;
me.html = "This is Jhon Doe!";
me.callParent();
}
});
The previous class extends from the panel class and adds a title, size and content, it doesn’t have any important functionality but it’s enough for this example.
The next thing is to load the class and instantiate it as follows:
//...
//Loading the class
Ext.require("Bleext.training.UsuarioPanel");
Ext.onReady(function(){
var john = Ext.create("Bleext.training.UsuarioPanel",{
renderTo : Ext.getBody()
});
john.center();
});
This code goes in the app.js file we created at the beginning, we’ve already configured the Loader with the paths there.
Finally, it is necessary to create the HTML which includes the Ext4 library and the file app.js.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>ExtJS Loader</title> <link rel="stylesheet" href="../common/js/Ext/resources/css/ext-all.css" type="text/css" media="screen" title="no title" charset="utf-8"> <script src="../common/js/Ext/ext-all-dev.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </head> <body> </body> </html>
When you run the example in the browser you will see a nice panel in the center of the screen, as shown in the following image:
Using the Loader
Load only the necessary classes of Ext
So far we have uploaded the entire library of Ext JS, but sometimes we don’t use all components of the library and it may not be worth it to load it, for those cases we can load only those components we need, to do that we need to use the file “ext-dev.js” instead of “ext-all-dv.js”
<!-- Delete this line --> <script src="../common/js/Ext/ext-all-dev.js" type="text/javascript" charset="utf-8"></script> <!-- add this line in the HTML --> <script src="../common/js/Ext/ext-dev.js" type="text/javascript" charset="utf-8"></script>
The file ext-dev.js only contains the classes needed to load classes on demand, also it contains some other utilities.
If we update the example on the browser at this moment we will see an error telling us that the class couldn’t be loaded: “Failed loading ‘src/panel/Panel.js’, please verify that the file exists”.
We need to set the correct path
This happens because we need to specify the path where the library is found, in this case I have it located in a folder called “common/js/Ext”, in that folder there’s another folder called “src” where all the classes are separated by file, this is the location where we should set the path so the files can be loaded, let’s modify the “app.js” file and add the new path as follows:
Ext.Loader.setConfig({
enabled : true,
paths : {
Ext : "../common/js/Ext/src",
Bleext : "js/Bleext",
CRM : "js/Crm"
}
});
Now we can see the the panel in our screen and if we open the console we’ll see all the files that have been loaded dynamically.
Loading too many classes
You probably noticed that the panel was rendered slower than when we loaded the classes dynamically, this is because more files are being downloaded, the best thing to do is to create a custom version of Ext with only the classes that we’ll use and compressed it into a single file to avoid downloading all the separate classes. Later on I will show how to create a customized Ext version because it requires a separate tutorial.
Conclusion
In this tutorial we saw how to configure the loader and load classes dynamically, also we saw how to load the classes from the Ext library. When our application is deployed in production it is recommended to generate a single compressed file with the version of Ext, also the packages should be compressed too and contain all the classes of the modules of our application. In future tutorials I will talk more about the Loader since there are other things to talk about.
Remember to follow us on twitter or subscribe to our mailing list in order to receive updates for coming tutorials about Ext JS.
Nice tutorial…its help me a lot to learn Ext JS 4.
Thanks man.
@bleext
Thanks for you article.
Much of the startup delay is due to two (2) things:
- loading of the initial Ext library.
- synchronously loading of scripts (not the case in your example, since you used Ext.require(”).
The Ext-all.js is >5Mb which would be a huge download impact on startup.
The Ext-dev.js is the core library but is still 921Kb… not trivial
What is really needed is a preloader with a splash screen/progressbar. This experience is popular in desktop apps and is now needed with Ext web apps.
The preloader loads all critical libs (including ext-debug.js) asynchronously and in parallet and engages the user with a splash screen until the Ext.require() Ext.onReady() functions are available.
Within the week, I will be posting a blog about a generic, nice `Ext.js Preloader` solution.
How to combine your custom files in one ore more files based on usage?
For examples an “application” module with its model, controller, views, store etc. on your bleext desktop?
awesome post, very helpful thanks!
Don’t forget NOT to include any required file using script tag, otherwire you’ll end up debugging your program for 2 hours, figuring out why it’s not working.