Ext js mvc series I environment construction and overall understanding of MVC Framework

Because ext JS 4 is used as the front-end framework in recent projects, you must learn about it. This series mainly summarizes the ext js mvc framework, which is the new development mode of ext JS 4. This article mainly summarizes the following points.

1. project directory structure
2. Reference CSS and JS files
3. overall understanding of the MVC Framework

Project directory structure

Ext js 4 follows a unified directory structure, which is somewhat similar to ASP. net mvc. In MVC, all classes are placed in the app Directory, which contains four sub-directories (each sub-directory represents a namespace), including controller, model, view, and store. The directory structure is as follows:

Reference related CSS and JS files

To use ext JSS normally, use the ext-all.css, bootstrap. JS, and project entry app. js files in the headtab on the first page, as shown in.

Overall understanding of MVC Framework

In order to have a general understanding of the MVC development mode of ext JS, let's take a look at a picture and then describe it in detail.

1. Each application has an object, that is, the application object. Each application also adopts a single entry structure, and a shortcut function is Ext. application ({config}), create an application object instance, and run it. At the beginning of application creation, the Controller class will be loaded, and after the loading is complete, it will be a formal lunch.
2. Application will create a viewport 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 that it is the carrier of the View Interface. A page can only have one viewport instance.
4. View is purely a set of interface components, or Form Controls (such as form, grid, and window ). Store is used to load data and display the data on the interface. The response of the interface control is written in the controller. The view has no knowledge of the existence of the controller, and there is no code dependency.
5. The controller role 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 (such as clicking the Save button) to determine the response method of the interface components on each 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 components on the interface and bind event processors to them.
6. Model is the embodiment of abstract data. A simple understanding is a row of records in the database.
7. Store is an abstraction of the process of loading data through the network. Store sends a request (usually an Ajax request) through data to the background to obtain data (generally returned in JSON format ), store depends on the model. Only the associated model object can be used to visualize the retrieved data.

To sum up, I feel that the advantage of the MVC Architecture is that the view and model are abstracted so that they can be reused better. When a panel is created, it can be called everywhere, the real business logic is well encapsulated in the controller, which facilitates modular system development.

The following section describes how to use application, viewport, and view to initialize an application and deploy a page.