Describes the changes that Ext JS 4 MVC brings to web development

At the end of the paper, we will discuss the problems and solutions of the author in the process of application, and propose some further improvement of MVC.

EXT JS 4 is currently a Sencha product, and the official version number of 4.x is 4.0.7. Ext JS 4 offers a commercial version, but if your project is open source, you can http://www.aliyun.com/zixun/aggregation/17944.html "> free use Ext JS 4." Ext JS Forum is currently very active; Ext JS is not only upgraded to improve, according to Sencha official statistics, the use of Ext JS Developers in the number of more than 1 million.

EXT JS 4 compared to previous versions

Improved rendering efficiency

All classes are tuned, including layout engine overrides that most affect rendering efficiency.

Namespaces

The namespace is the basis for the MVC of Ext JS 4, since this Ext JS class can be stored separately by scope.. NET or Java developers should be familiar with the benefits of namespaces: namespaces make it easy to map a class-wide name to a class file path, and it makes the class easier to manage by storing classes in a scope folder. Take MVC as an example, Ext JS class will be scoped: model, view and controller are divided into three categories, respectively, stored in the corresponding folder.

Load classes on Demand

Listing 1. Example of loading classes on demand

This feature is actually based on the new design of the class system, see the following summary. Unlike previous versions: even if you use a small number of units in the Ext JS frame, ext JS will load all the frames and load only the classes needed to load on demand. Therefore, on-demand loading classes provide an effective way for JS optimization and reduction of memory consumption. Sencha This also provides the SDK tool to the JS code to minify, run before the deployment minify to the JS code to minimize, will get a minimum JS set.

New class system due to space constraints, please refer to the Official document class system, which details how to use EXT JS 4 to define the class, as well as error handling and debugging

MVC architecture with the previous version of Ext JS 4 to write large client applications, you will find more and more "difficult", you will find that there are four difficult: difficult to write, difficult to read, difficult to maintain, difficult to expand. As more and more functions are added, the code is getting out of control, a JS file thousands of lines may be very common, of course, do not rule out the code is well organized and easy to expand, but these require developers to pay additional development costs to organize their own architecture. Starting with your own MVC architecture from EXT JS 4, developers don't have to pay this extra price to write beautiful code. EXT JS 4 has its own definition of MVC, and the following defines the documentation from the Sencha official website:

: A set of fields and their corresponding data (for example, the "User" class model has "username" and "password" fields), through the data packet (STORE,PROXY, etc.) model can serialize themselves, and through the association relationship from a model Navigate to another Model. Model works like the record class in Ext JS 3, usually combining the Store to provide display data for a table control or other control.

: Any component, such as Grid, tree, and Panel, are views.

: Write all the logical code here: rendering the view, instantiating the model, loading and initializing other controllers, and so on.

The concept of MVC is simple, but is it not that simple to use the MVC pattern in the actual project to organize the code? The answer in the next chapter "Introduction to the development of EXT JS4: Sencha Architect 2", this chapter will detail how to use the tool to develop the MVC pattern of the EXT JS program.