EXTJS MVC Development Model detailed

In the development process of JS, large-scale JS script is difficult to organize and maintain, which has always been a first-class problem for front-end developers. ExtJS in order to solve this problem, in the ExtJS 4.x version introduced the MVC development pattern, began to divide a JS (ExtJS) application into the Model-view-controller three layer, for the JS application of how to organize the code to indicate the direction, At the same time make large-scale JS code easier to reuse and maintain, this is the ExtJS MVC development Model of the original intention.

In the official MVC example, we can see a simple list editing feature, which is explained in detail around this feature, so let's uncover the mystery of ExtJS MVC!

The sample code for this article applies to ExtJS 4.x and ExtJS 5.x, and is available in ExtJS 4.2.1 and ExtJS 5.0.1!

This article by Fei Qi ([email protected]) original, and published in Http://www.qeefee.com/article/extjs-mvc-in-detail, reproduced please indicate the source! Recommended More ExtJS tutorials, Extjs5 tutorials

Implementation of the list editing function in general development mode

Let's take a look at this example, which is very simple: load a list when the page opens, open the edit window when you double-click a row of data in the list, click the Save button when editing is complete, and then update the list. As follows:

Extjs-mvc-in-detail

In the normal development mode, it is very simple to implement this function, the code is as follows:

Ext.onready (function() {    //1. Defining ModelExt.define ("MyApp.model.User", {extend:"Ext.data.Model", fields: [{name:' name ', type:' String '}, {name:' age ', type:' int '}, {name:' phone ', type:' String '}        ]    }); //2. Creating a storevarstore = ext.create ("Ext.data.Store", {model:"MyApp.model.User", data: [{name:"Tom", Age:5, Phone:"123456"}, {name:"Jerry", Age:3, Phone:"654321"}        ]    }); //3. Creating a Gridvarviewport = ext.create ("Ext.container.Viewport", {layout:"Fit", items: {xtype:"Grid", Model:"MyApp.model.User", Store:store, columns: [{text:' name ', Dataindex:' name '}, {text:' age ', Dataindex:' age ', Xtype:' Numbercolumn ', Format:' 0 '}, {text:' phone ', Dataindex:' phone '}            ]        }    }); //4. Add double-click EditvarGrid = Viewport.down ("Grid"); Grid.on ("Itemdblclick", function(Me, record, item, index, E, eopts) {//5. Creating an Edit formvarwin = ext.create ("Ext.window.Window", {title:"Edit User", width:300, height:200, layout:"Fit", items: {xtype:"Form", Margin:5, border:false, Fielddefaults: {labelalign:' left ', labelwidth:60}, items: [{xtype:"TextField", Name:"Name", Fieldlabel:"Name"}, {xtype:"Numberfield", Name:"Age", Fieldlabel:"Age"}, {xtype:"TextField", Name:"Phone", Fieldlabel:"Phone"}]}, buttons: [{text:"Save", Handler:function() {Win.down ("Form"). UpdateRecord ();                        Record.commit ();                    Win.close ();        }                }            ]        }); Win.down ("Form"). Loadrecord (record);    Win.show (); });});

In this code, we used the model, the Store, the Grid, and the edited window and form. A simple comment has been given in the code, which is not the focus of today's presentation.

EXTJS MVC Development Model

Assuming you've never been exposed to EXTJS MVC development patterns, but you know the MVC development pattern in ASP, or any other language, let's just imagine what MVC would look like under ExtJS.

1. JS is required to run in an HTML page, so it has to have a host page
2. It needs to have model, view and controller layer three, which is the basis of MVC, if the lack of these three layers, what is called MVC?
3. This JS program may need to have a portal because JS does not assign controllers and actions based on URLs like ASP.

Well, for the moment we think of so much, what does it look like in the real ExtJS MVC development process? Let's look at the directory structure:

The first step is to create the portal page

Create an HTML page, we use the mvc.html page, in the same directory on this page, we create an app folder, under this folder to place the JS code. Mvc.html is the main page of our program host.

Second step, create the directory structure

Create a controller, model, store, and view folder under the App folder, and you'll know what code they're going to put in the name. Then create application.js as the entry file for our program and reference the Application.js file in mvc.html.

The third step is to create the model

Under the Model folder, create the User.js file:

This file will be stored in our model, and we can directly assign the code of the most defined model to the face.

The code for App/model/user.js is as follows:

ext.define (' MyApp.model.User ', {    ' Ext.data.Model ', fields    : [         ' name '  },        'age '},        ' phone '   }    ]});

Fourth step, create store

Although store is not a necessary step in MVC, as a data warehouse, the store plays a role in data access, and the data presented by grid, form, etc. is provided through the store, so the store is essential in the ExtJS MVC development model.

The code for App/store/user.js is as follows:

ext.define ("MyApp.store.User", {    "Ext.data.Store",    " MyApp.model.User ",    data: [        " Tom "},         "Jerry" }    ]});

Fifth step, create the View

In order to implement the list and editing functions, we need two views, namely list and edit, then the structure of view is as follows:

The app/view/user/list.js corresponds to our grid definition, except that the instance that created the grid is changed to the extension that created the grid.

The app/view/user/list.js code is as follows:

Ext.define ("MyApp.view.user.List", {extend:"Ext.grid.Panel", alias:' Widget.userlist ', Store:"User", InitComponent:function() {         This. Columns = [{text:' name ', Dataindex:' name '}, {text:' age ', Dataindex:' age ', Xtype:' Numbercolumn ', Format:' 0 '}, {text:' phone ', Dataindex:' phone '}        ];  This. Callparent (arguments); }});

app/view/user/edit.js corresponds to the definition of our window, but it is also implemented in the form of extensions.

The app/view/user/edit.js code is as follows:

Ext.define ("MyApp.view.user.Edit", {extend:"Ext.window.Window", alias:"Widget.useredit", Title:"Edit User", width:300, height:200, layout:"Fit", items: {xtype:"Form", Margin:5, border:false, Fielddefaults: {labelalign:' left ', labelwidth:60}, items: [{xtype:"TextField", Name:"Name", Fieldlabel:"Name"}, {xtype:"Numberfield", Name:"Age", Fieldlabel:"Age"}, {xtype:"TextField", Name:"Phone", Fieldlabel:"Phone"}]}, buttons: [{text:"Save", Action:"Save"}    ]});

Note: For the creation of the view class, we need to define alias, which is to make it easier for us to create an instance of the component through Xtype. (if there is no alias, we will be very difficult to use in viewport and controller-this is the pit I climbed!) ）

Sixth step, create a controller

As a bridge between model, store and view, controller plays a key role in the MVC development model. If the model defines the data schema, the store provides a way to access the data, and the view is used to display the data, the controller will be used to control the specific data manipulation.

The code for App/controller/user.js is as follows:

Ext.define (' MyApp.controller.User ', {extend:' Ext.app.Controller ', stores: [' User '], models: [' User '], Views: [' Viewport ', ' user. List ', ' user. Edit '], init:function() {         This. Control ({' userlist ': {itemdblclick: This. Edituser},' Useredit Button[action=save] ': {click: This. Saveuser}}); }, Edituser:function(grid, record) {varwin = Ext.widget ("Useredit"); Win.down ("Form"). Loadrecord (record);    Win.show (); }, Saveuser:function(BTN) {varwin = Btn.up ("Window"), form = Win.down ("Form"), record = Form.getrecord ();        Form.updaterecord ();        Record.commit ();    Win.close (); }});

Let's take a detailed look at this piece of code from the controller. In this piece of code:

1. Add the defined model, store, and view as configuration items to the controller, and the controller will load the files;
2. Add a response event to the view in the Init method (the way to add an event here is to get the control by query and add it, which is why you added alias to the view)
3. The Edituser method and the Saveuser method are the specific operation contents.

With these steps, we've linked the model, store, and view together. Then we go into the Application.js file and refine our entry page.

Seventh step, perfect Application.js file

In many cases, application.js files are also simply named App.js, and they work the same way, providing an entry for the application. It can be very simple, our Application.js file code is as follows:

ext.application ({name:    Appfolder:   App"  , controllers: [  ], Autocreateviewport:   launch:  Span style= "color:blue;" >function   () { //after the page load is complete  }});

• Name: application names
• appfolder: The directory of application code used to dynamically load code
• Controllers: The controller used by the application
• Autocreateviewport: Whether to create viewport automatically, default is False, we set this to true, when it is set to true, the application will automatically create viewport, The definition of this viewport is in our app/view/viewport.js ; If false, we need to create the corresponding view manually in launch.

The eighth step, the definition of viewport.js

Viewport as the view panel of our application, can be individually defined in a viewport.js file. It is also very simple to define, usually to use one or more view as its child control.

The app/view/viewport.js code is as follows:

ext.define ("MyApp.view.Viewport", {    "Ext.container.Viewport",     "Fit",    items: {        xtype:"userlist"    }});

After completing these steps, we can run mvc.html to see the effect.

Summarize

The ExtJS MVC development model gives us a good idea of how to organize and maintain the code, and its starting point is fine, but in the actual operation we will find that this pattern is too cumbersome, which may be due to our example being too simplistic.

EXTJS MVC's model, Store, View, controller each layer of code is created by Ext.define to create the form of the class, so before using ExtJS MVC, we need to have a certain understanding of the ExtJS class system, Includes how to use Ext.define to customize the class.

For the view layer controls, we need to specify an alias property for them, which makes it easy to create an object from Xtype, and it can be conveniently found in the controller to add specific actions to its child controls.

This article was originally created by Fei Qi ([email protected]) and published in the Takeoff Network (http://www.qeefee.com)

Original address: Http://www.qeefee.com/article/extjs-mvc-in-detail

More ExtJS tutorials, Extjs5 tutorials Please pay attention to the takeoff network!

EXTJS MVC Development Model detailed