Implementation of list editing function under conventional development mode
Let's take a look at this example first. Its function is very simple: load a list when the page opens, open the editing window when double clicking a row of data in the list, click save after editing, and then update the list
imageextjs-mvc-in-detail
Under the conventional development mode, it is very simple to realize this function. The code is as follows:
Ext.onReady(function () {
//1. Define Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
});
//2. Create a store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
data: [
{ name: "Tom", age: 5, phone: "123456" },
{ name: "Jerry", age: 3, phone: "654321" }
]
});
//3. Create grid
var viewport = Ext.create("Ext.container.Viewport", {
layout: "fit",
items: {
xtype: "grid",
model: "MyApp.model.User",
store: store,
columns: [
{ text: 'full name', dataIndex: 'name' },
{ text: 'Age', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
{ text: 'Telephone', dataIndex: 'phone' }
]
}
});
//4. Add double click Edit
var grid = viewport.down("grid");
grid.on("itemdblclick", function (me, record, item, index, e, eopts) {
//5. Create edit form
var win = 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: "full name" },
{ xtype: "numberfield", name: "age", fieldLabel: "Age" },
{ xtype: "textfield", name: "phone", fieldLabel: "Telephone" }
]
},
buttons: [
{
text: "preservation", handler: function () {
win.down("form").updateRecord();
record.commit();
win.close();
}
}
]
});
win.down("form").loadRecord(record);
win.show();
});
});
In this code, we use Model, Store, Grid, and edited Window and Form. Simple comments have been given in the code, which is not the focus of today.
Extjs MVC development mode
Suppose you have never been exposed to Extjs MVC development mode, but you know ASP Net MVC, or MVC development mode in any other language, let's imagine what MVC under Extjs should look like?
JS needs to run in html pages, so it needs to have a host page
It should have three layers: Model, View and Controller, which is the basis of MVC. If these three layers are missing, what is MVC?
This JS program may need to have an entry, because JS is not like ASP Net to allocate controllers and actions according to URL s
Well, we have thought of so much for the time being. What does it look like in the actual Extjs MVC development process? Let's take a look at the directory structure:
The first step is to create an entry page
To create an html page, we use MVC html page. In the same directory of this page, we create an app folder, which is used to place js code under this folder. mvc.html is our program host page.
The second step is to create a directory structure
Create the controller, model, store and view folders under the app folder. You can know what code they should put from the name. Then create application JS as the entry file of our program, and in MVC Reference application. In HTML JS file.
Step 3: create a model
Under the model folder, create user JS file:
This file will store our model. We can directly assign the code defining the model at the top to it.
app/model/User.js code is as follows:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
});
Step 4: create a store
Although store is not a necessary step in mvc, as a data warehouse, store plays the role of data access. The data presented by grid and form are provided through store. Therefore, store is essential in extjs mvc development mode.
app/store/user.js code is as follows
Ext.define("MyApp.store.User", {
extend: "Ext.data.Store",
model: "MyApp.model.User",
data: [
{ name: "Tom", age: 5, phone: "123456" },
{ name: "Jerry", age: 3, phone: "654321" }
]
});
Step 5: create a view
In order to realize the list and editing functions, we need two views, list and edit. The structure of the view is as follows:
app/view/user/List.js corresponds to our definition of grid, but changes the instance of creating grid to the extension of creating grid.
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: 'full name', dataIndex: 'name' },
{ text: 'Age', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
{ text: 'Telephone', dataIndex: 'phone' }
];
this.callParent(arguments);
}
});
app/view/user/edit.js corresponds to our definition of window, but it is also implemented in the form of extension.
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: "full name" },
{ xtype: "numberfield", name: "age", fieldLabel: "Age" },
{ xtype: "textfield", name: "phone", fieldLabel: "Telephone" }
]
},
buttons: [
{ text: "preservation", action: "save" }
]
});
Note: for the creation of view class, we need to define alias, which is convenient for us to create the instance of this component through xtype. (without alias, it would be difficult for us to use it in viewport and controller - this is the pit I climbed!)
Step 6: create a controller
As a bridge connecting model, store and view, controller plays a vital role in mvc development mode. If the model defines the data mode, the store provides the data access method, and the view is used to display the data, the controller will be used to control the specific data operation.
app/controller/user.js code 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) {
var win = Ext.widget("useredit");
win.down("form").loadRecord(record);
win.show();
},
saveUser: function (btn) {
var win = btn.up("window"),
form = win.down("form"),
record = form.getRecord();
form.updateRecord();
record.commit();
win.close();
}
});
Let's talk about the code of controller in detail. In this Code:
Add the defined model, store and view to the controller as configuration items, and the controller will load these files;
Add a response event to the view in the init method (the method of adding an event here is to obtain and add the control through query, which is why alias is added to the view)
editUser method and saveUser method are specific operation contents
With these steps, we will link model, store and view together. Then, we enter application JS file, improve our entry page.
Step 7: improve the application JS file
In many cases, application JS file is also simply named app JS, their functions are the same, providing an entry for the application. It can be very simple, our application JS file code is as follows:
Ext.application({
name: "MyApp",
appFolder: 'app',
controllers: ["User"],
autoCreateViewport: true,
launch: function () {
// Execute after the page is loaded
}
});
Name: application name
appFolder: the directory of application code, which is used to dynamically load code
Controllers: controllers used by the application
Autocreateviewort: whether to automatically create a Viewport. The default is false. We set it to true here. When it is set to true, the application will automatically create a Viewport. This Viewport is defined in our app / view / Viewport JS; If it is false, we need to manually create the corresponding view in the launch.
Step 8, viewport Definition of JS
As the view panel of our application, the Viewport can be defined separately in a Viewport JS file. Its definition is also very simple. It is usually used to take one or more views as its child controls.
app/view/viewport.js code is as follows:
Ext.define("MyApp.view.Viewport", {
extend: "Ext.container.Viewport",
layout: "fit",
items: {
xtype:"userlist"
}
});
After completing these steps, we can run MVC HTML to see the effect.
summary
Extjs MVC development mode provides us with a perfect direction of code organization and maintenance. Its starting point is good, but in the actual operation process, we will find that this mode is too cumbersome, which may be caused by the simplicity of our example.
The code of Model, Store, View and Controller layers of Extjs MVC is completed by creating classes through Ext.define. Therefore, before using Extjs MVC, we need to have a certain understanding of Extjs class system, including how to use Ext.define to customize classes.
For the View layer controls, we need to specify an alias attribute for them to create objects through xtype, and we can easily find them in the Controller to add specific operations for its child controls.