Dynamic class loading

The dynamic class loading system is another new feature for Ext JS 4. It also provides an integrated

dependency management system.

 

This new feature is optional and you should avoid using it in production,though it is very useful for the

development environment. We are going to learn why it is so useful:

 

In previous versions of Ext JS, if you wanted to use the following code, you had to wait until the entire

framework was loaded,correct? If you tried to use it before the framework was loaded, you would

probably get an error:

var win = new Ext.Window({

    title: 'Hello!',

    width: 100,

    height: 50

});

win.show();

 

This behavior changes in Ext JS 4. We can ask Ext JS to load the classes that we need to use and then

call a function when it is finished loading. For example:

Ext.require('Ext.Window', function() {

// 之前的代码放这里

});

 

When we use Ext.require, we are telling Ext JS we need Ext.Window before calling a function.The framework will also resolve any dependencies that the loaded class has.

 

To use this feature, you have to use Ext.define and define the dependencies in the code using two

new class properties:

(1)requires: This declares the class dependencies required for a class to work.These classes are going

to be loaded before the current class gets instantiated.

(2)uses: This declares the optional class dependencies, but is not required. These classes do not have

to be availabel before the current class gets instantiated.

 

The Loader is recursive. If any class has dependencies that are not yet loaded, it will keep loading all

the required classes until all of them are ready. All these dependencies are managed internally. This

means you do not need to manage all those script tags in the HTML page,because the class loader

will to it for you. This kind of flexibility is very useful in the development environment, when this is

more important than page speed.

 

........................待续