Ext js 4 countdown: Dynamic Loading and new class mechanism count down to ext JS 4: Dynamic Loading and New Class System (below)

Document directory

• Example
• Iv. comprehensive example bringing it all together

Ext js 4 countdown: Dynamic Loading and new class mechanism count down to ext JS 4: Dynamic Loading and New Class
System
(Lower)

January 19,201 1 by Ed
Text Translation ext (ajaxjs.com) Frank

Http://www.sencha.com/blog/2011/01/19/countdown-to-ext-js-4-dynamic-loading-and-new-class-system

Dynamic Loading of Dynamic Loading

After learning about the "class mechanism", we will unveil a completely new feature in ext JS 4: dynamic loading ). For a long time, in versions earlier than extjs, although cropping is allowed, the entire framework must be loaded before it is used. It seems that you have to download the entire ext-all.js source file to create a normal Ext. Window, otherwise it will not work. The dynamic loading of ext JS 4 is based on this technical difficulty. An example is as follows:

Ext. Require ('ext. Window', function () {<br/> New Ext. Window ({<br/> title: 'loaded dynamically! ', <Br/> width: 200, <br/> Height: 100 <br/>}). Show (); <br/> });

The above process requires ext
JS loads the Ext. window class, calls the function after loading, and creates a window instance. The Ext. Require function supports array parameters to input multiple classes to be loaded. It is very convenient to use. Of course, quite a few details are hidden behind it. EXT
Dynamic Loading of JS 4 does not require server-side installation. It is purely client-side. It is worth mentioning that it can automatically calculate dependencies and download required classes. For example, an Ext. window class is like this:

Ext. define ('ext. window ', {<br/> extend: 'ext. panel ', <br/> requires: ['ext. util. mixedcollection '], <br/> mixins: {<br/> draggable: 'ext. util. draggable '<br/>}< br/> });

The purpose of dynamic loading is actually "loading on demand ".

As long as ext
When JS loads the Ext. Windows class, it will analyze the dependency, what extend, what requires, and what Mixin ...... Before creating a window instance, you must confirm that the required package is already in the page resource; otherwise, it cannot be created successfully. In short, you cannot miss anything you need. In fact, the loader uses the string name to identify the package of each class. The principle of the loader is language-based reflection ". In this example, the dependency result will be the following file:

• Src/window. js
• Src/panel. js
• Src/util/mixedcollection. js
• Src/util/draggable. js

The loading process of the loader is recursive. Therefore, no matter how many layers are nested, the package file is always loaded back. However, we still need to emphasize that in the product launch stage, we should avoid downloading JS files one by one, because it is much more time-consuming than downloading a single file. In this case, a problem arises when comparing to Dynamically Loaded scattered JS files, that is, you have to know which files need to be packaged in full; which files are suitable for distributed and dynamic loading, and what policies are adopted at what stage. For example, only need a dialog box parts, apparently the ext-all-debug.js load is too large, download for too long, unload does not need the package naturally better, should adopt more "intelligent" dynamic loading.

For the debugging phase, it is very difficult to have over 60 thousand lines of code in the face of a ext-all-debug.js file. Hitting, tracking tells you ext-all-debug.js file 47,657th lines seem not very useful, still hard ...... If it passes through the dynamic loader, It will be located in row 56th of the src/data/jsonreader. js file and report the exact number of lines for each source file.

This can be said to be a huge progress to help you debug your program. However, in the local development stage, it is appropriate to load all the source files. Therefore, the loader provides a deadlock detection function that can load files synchronously or asynchronously.

If the new content of the new system does not suit you, it does not matter. We recommend that you use the old method, because the new class system is completely backward compatible (completely backwards
Compatible), so you can use the old method. Ext. Extend retains the old way to create any class and still provides a ext-all.js that contains the entire framework content.

Example

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

,
Download

(The example has been written in Chinese). At first, the page loads only the code for basic calls, and the actual code must be retrieved from the server through dynamic requests. To run these examples, you must deploy them on the server beforehand. You do not need dynamic servers. We recommend that you open your firebug and run the program while testing the example, while paying attention to how Ajax Loads files from the server, there are situations from a file in the first example to a six-point 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, which is 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 commitrevertr.

, 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/>