Demo of extjs 4 Dynamic Loading

ArticleDirectory

• Iv. comprehensive example bringing it all together

The official website provides four
Example of JS class loading mechanism for your demonstration

Download

(The example has been written in Chinese), as shown in:

 

• Go Online Demo: http://playen.ajaxjs.com/playen/ext/LoaderDemo/index.html

• Download: http://playen.ajaxjs.com/playen/ext/LoaderDemo/LoaderDemo.zip

At first, the page is loaded with basic calls.CodeThe actual code must be retrieved from the server through a dynamic request. To run these examples, you must deploy them on the server beforehand. You do not need dynamic servers. We recommend that you enable your firebug while testing the example.Program, While paying attention to how Ajax Loads files from the server, from a file in the first example to a file in the fourth example. Observe the results of the "Net" Network Panel, as shown in.

As long as the class is downloaded, it will not be downloaded again. That is to say, if the previous example has downloaded the same JS file, then the subsequent example will automatically recognize the JS file and will not download it again. We can refresh the page multiple times and click different examples to observe the debugging results. The sample programs used are simple classes. You can click the link to view the code.

I. asynchronously load a single file loading a single file

In this example, only one file is loaded. Source File src/product. js

The create product instance dialog box is displayed.

Ext. require ('product', function () {<br/> var Product = new product (); <br/> product. setname ('ext JS 4'); </P> <p> alert ("Product Name:" + product. getname (); <br/> });

 

Shows the example running result:

 

The asynchronous loading class is as follows:

// This is the simplest class used in Example 1. This class does not depend on other classes, so it runs immediately after loading the example. <Br/> Ext. define ('product', {<br/> config: {<br/> name: 'product name' <br/>}< br/> });

2. Load loading a file with Dependencies by dependency

Currently, we need ext to load the superuser class (See src/superuser. js

), But superuser inherits from user (See src/user. js

). Therefore, the loader first loads the user, then superuser, and then executes the callback function.

Ext. require ('superuser', function () {<br/> var superuser = new superuser (); <br/> superuser. setemail ('ed @ sencha.com '); </P> <p> alert ("Is it a superuser? "+ Superuser. issuper (); <br/> });

Shows the example running result:

Iii. Mixed mixins

How to "mix" other classes on the basis of a class? The answer is to define the configuration items of "mixins. We create a developer class on top of the user class.

, The developer class has

Hackaway method:

Ext. require ('developer ', function () {<br/> var Dev = new developer (); <br/> Dev. setemail ('Frank @ ajaxjs.com '); <br/> Dev. hackaway (); <br/> });

Shows the example running result:

 

Iv. comprehensive example bringing it all together

Finally, let's demonstrate all the features. This class inherits from the developer class, and the developer inherits from the user. The parent class user is added to madskills, especially the leetskills class.

. In addition to madskills and leetskills, the running of this class also depends on commitreverter.

, The revertcommits () is required (). The last example is also the most complex one. A total of six files need to be pulled back. In the real world, you can draw a dependency graph to determine the relationship at any level and then let ext JS calculate the dependency relationship (how to draw a picture? It seems there is a discussion in the Forum ~ : Http://www.sencha.com/forum/showthread.php? 121660-create-dependency-graph-Hierarchy

).

Ext. require ('effect', function () {<br/> var ED = new effecect (); </P> <p> // mix data from madskills <br/> ed. hackaway (); </P> <p> // mixed from leetskills <br/> ed. makeitbetter (); </P> <p> // dependency from revertchanges <br/> ed. revertcommits (2); <br/>}); <br/>