MVC of extjs 4

Extjs is a JS framework I have heard of for a long time, but it has never been used. During the study period, there was a younger brother in the dormitory who was using it. However, at that time, I was so obsessed with WordPress development that I was too lazy to ignore it. In the company, a launch system uses a treepanel component in this framework. On the entire interface, a tree panel is thrown in the middle, and I don't know why. CSS has bugs, I broke the buttons and made them ugly. So I volunteered to debug them carefully and finally fixed the bug on the display. From then on, I got to know extjs for the first time. The reason it really attracts me is that it can free up the development of rich client applications from the art and basic interaction, and only needs to focus on business logic development, this allows background engineers to quickly develop professional website application systems. I think this is really an invaluable task. (If I have a good intuition, the flex framework is also like this, which is why I am interested in it. Of course I have no time to try it)

According to the official website, extjs 4.x is a greatly changed version, which has changed a lot and has many new features compared with 3.x, which has been widely used, MVC is one of its new features. Since I have been learning the MVC model (mainly using the yii framework) for the last six months, this term has aroused my strong interest, I have read the example of this framework MVC on the official website over the past few days. Today, I have finally touched on the door and drew the figure above. The four pictures are the first concrete product of my personal understanding of the framework.

This figure is briefly described below.

1. each application has an object, that is, an application object instance. Each application also adopts a single entry structure, and a shortcut function is Ext. application ({config}), create an application object instance, and run it. The behavior here is similar to that of the yii framework application, create an instance, and then run;

2. At the beginning of application creation, the Controller class will be loaded. After the loading is complete, the system will officially perform the lunch;

3. application will create a viewport object instance during lunch, which is like a skeleton. Various views can be assembled on it. Specifically, there are various layout forms and form controls, it can be said to be the carrier of the application interface;

4. the role of controller is completely an adhesive. At the beginning of loading, it will help to load the model, store, and view classes related to it, and its real role, it uses a series of event processing functions to determine the response method of each interface component on the view to user interaction. It can be said that it is a collection of event processor functions; here, we mainly use a control member function to bind events. Using another component called componentquery, we use the syntax similar to CSS selector to locate the components on the interface and bind the event processor to them;

5. the model is specific to the abstract data, or can be understood as a record in the database, how is it converted into an object, and the database field is converted into the ing relationship of the object attribute; here, what is more than the yii framework MVC model is store. In the yii framework, there is a powerful ORM system, and a powerful ar connects the model directly to the DB, once the data is obtained, it becomes an object. In the extjs framework,CodeAll on the client, there will inevitably be a need to load data through the network. In my opinion, store is an abstraction of the process of loading data through the network. Store depends on model, the associated model object is used to obtain how to visualize the retrieved data to facilitate the display of the view. Therefore, the view depends on the store object, I feel that this store design concept can be used for reference. For some reason, when we use the PHP framework, we cannot allow the model to directly connect to the DB, can we also abstract the process of retrieving data and finally splicing it into a model object into a mechanism similar to store in extjs ?)

6. view is purely a set of interface components, or form controls. Data is loaded and displayed on the interface through store, and the responses of interface controls are written in the controller, view has no knowledge of the existence of controller or code dependency;

To sum up, I feel that the benefit of this system is that the view and model are abstracted so that they can be reused better. A panel can be created and called everywhere, the real business logic is well encapsulated in the controller, which facilitates modular system development. Basically, it is a set of excellent frameworks, because I have no experience with extjs 3 series, I cannot determine whether extjs 3 series has a qualitative leap over previous versions. Through careful mining, I found that its ease of use is indeed better than I previously imagined. Developers may not have to worry too much about the internal principles, as long as they understand that it is similar to me, you can quickly get started with something to do. Of course, you still have to watch the document as shown in the following figure.

Author: Charles

Original article: MVC of extjs 4