In Chapter 2, Creating an Application, we saw that we included ext-debug.js in the index.html folder, which has a smaller footprint compared to ext-all-debug.js. Also, as shown in the figure under the fifth item in the Class system section, the dependencies are automatically downloaded. This is taken care of by the class loader and hence it saves us from specifying the dependencies, manually.
The new class system has introduced a class loader, which takes care of resolving the class dependencies and loads them. This becomes very handy during the development.
The class loader functionality is provided by the Ext.Loader class and is enabled, by default, only when we use the development version (for example, ext-debug.js or sench-touch-debug.js) of the framework. It can be explicitly enabled by adding the following line of code before the Ext.application call in the app.js file:
Ext.Loader.setConfig({ enabled: true });This class loader supports three types of loading:
To tell the class loader to load the dependencies, asynchronously, the framework offers two APIs:
Ext.require: This is used to list out the classes, which are required and the loader will load those classes.For example,
Ext.require('Ext.window.Window'),Ext.exclude: This is used to list out the classes, which are not required and the loader will skip them.For example,
Ext.exclude('Ext.data.*').require('*'),//Exclude data package
The following are the advantages of asynchronous loading:
- Classes can be downloaded from the same as well as different domain
- No web server needed: You can run the application via the filesystem protocol (that is,
file://path/to/your/index .html) - Best possible debugging experience: Error messages come with the exact filename and line number
Following are the disadvantages of asynchronous loading:
- Dependencies need to be specified before hand
The class loader does the synchronous loading when we call Ext.create or Ext.widget to instantiate a call or a view, respectively. Ext.create is used to create an instance of any class in Sencha ExtJS as well as Touch whereas Ext.widget is used to instantiate a view using its xtype.
When the Ext.create is called, the class system checks whether the class is already present in the memory. If it is not, the loader loads the class before the class system can initialize it.
The following are the advantages of synchronous loading:
- There is no need to specify dependencies before hand
The following are the disadvantages of synchronous loading:
Hybrid loading brings in the best of the synchronous and asynchronous loading. It has all the advantages combined from synchronous and asynchronous loading.
As an approach, we will start with synchronous loading, and to have a better debugging experience, we would use the asynchronous loading. There are other ways to make the debugging experience better, which we will see in the next chapter.
Also, the dynamic loading shall be used during the development. In production, we must be using the minified version so that all the dependencies are combined in a single file. loader.