"Turn" ext JS MVC Development Mode

Original link:EXT JS MVC development Model

Create a controller, model, store, and view folder under the app (that is, the root folder), and you'll know what code they should put in the name. Then create application.js as the entry file for our program and reference the Application.js file in mvc.html.
Directory structure
-->app (root directory)
------>controller
------>model
------>store
------>view
------>application.js (sibling directories such as Controller)

Create model (entity Class)
Under the Model folder, create a user.js file
Ext.define (' MyApp.model.User ', {
    Extend: ' Ext.data.Model ',
    fields: [
        {name: ' name ', type: ' String '},
         {name: ' Age ', type: ' int '},
        {name: ' Phone ', type: ' String '}
&N bsp;  ]
});

Create Store
Although store is not a necessary step in MVC, as a data warehouse, store plays the role of data access, grid, form and other data presented through the store, so store in the ExtJS MVC development model is essential
The code for App/store/user.js 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"}
]
});

CREATE 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: ' Ages ', xtype: ' Numbercolumn ', format: ' 0 '},
{text: ' Telephone ', dataindex: ' Phone '}
];
This.callparent (arguments);
}
});

//app/view/user/edit.js CodeAs 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: "Ages"},
{xtype: "TextField", Name: "Phone", Fieldlabel: "Telephone"}
]
},
Buttons: [
{text: "Save", Action: "Save"}
]
});

Main entrance
Ext.application ({
Name: "MyApp",
Appfolder: ' App ',
controllers: ["User"],
Autocreateviewport:true,
Launch:function () {
Execute after page load is complete

}
});
Description
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 here to true, when it is set to true, the application will automatically create viewport, this viewport definition in our app/ View/viewport.js, if false, we need to create the corresponding view manually in launch.

"Turn" ext JS MVC Development Mode