Demo of extjs 4 Dynamic Loading

Source: Internet
Author: User
    • Iv. comprehensive example bringing it all together

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


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


    • Go Online Demo:

    • Download:

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 @ '); </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 @ '); <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:// 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/>

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.