Step by step use ext js mvc and ASP. Net MVC 3 to develop a simple CMS background management system for user management (1)

The basic framework of the application has been set up. Now, we need to complete functional modules one by one. First, complete the user management module. The main function of this module is to use a grid to display user information and use rowediting to edit and add users. Use the paging toolbar on the top of the Grid. Add three buttons on the toolbar to add users, delete users, and reset passwords for users. A text description will be added at the bottom of the grid. The description is: double-click the user to enter the editing status, and the user password is "123456" by default ". Reset the password to 123456 ".

First, create a model for user information, create a file named user. js under the scripts \ app \ model directory, and add the following model definition code:

Ext. Define ('simplecms. model. user ',{

Extend: 'ext. Data. model ',

Fields :[

"ID ",

{Name: "username", defaultvalue: "newuser "},

{Name: "email", defaultvalue: "newuser@email.com "},

{Name: "Roles", defaultvalue: "normal user "},

{Name: "created", type: "date", dateformat: "Y-m-d h: I: s", defaultvalue: new date ()},

{Name: "lastlogindate", type: "date", dateformat: "Y-m-d h: I: s "},

{Name: "isapproved", type: "bool", defaultvalue: true}

],

Idproperty: "ID"

 

});

 

There are many fields in the membership provider. Here, only seven fields are used: User ID, user name, email, role, creation date, Last Logon Time, and whether to disable them. This is just an example. You do not have to follow this process. You can modify the settings as needed. In the field definition, we can see that many fields have set the defaultvalue configuration item. Its function is to use the value of this configuration item as the default value when creating a user. This is the new model function added by extjs 4 and is quite practical.

After the model is defined, the store is defined. In addition to defining users, store also defines the store of user roles because you need to set user roles. First, define your store. Because all operations are completed in the grid, you can use the API configuration item Function to define the list, add, delete, and edit addresses, you can easily implement the submission operations of these functions. The reader format and writer format are well defined in other areas. Create the users. js file in the scripts \ app \ store \ directory and add the following code to the file:

Ext. Define ("simplecms. Store. Users ",{

Extend: 'ext. Data. store ',

Model: 'simplecms. model. user ',

Batchactions: false,

Autoload: True,

Proxy :{

Type: "ajax ",

API :{

Read: 'users/list ',

Destroy: 'users/delete ',

Update: "users/edit ",

Create: "users/Add"

},

Reader :{

Type: 'json ',

Root: "data ",

Messageproperty: "MSG"

},

Writer :{

Type: "JSON ",

Encode: True,

Root: "data ",

Allowsingle: false

}

}

})

 

 

In the Code, if the batchactions configuration item is set to true, data is submitted every time an operation is executed instead of batch operations. The configuration item autoload indicates that data is automatically loaded without manual loading.

In the API configuration item in the proxy, the submit address is fixed for the four operations, and the method of the users controller is submitted. In the render configuration item, the format of the returned data is fixed, and the data must be in the Data keyword, that is, the value defined by the root configuration item, which can be defined according to your own habits. The error message is in the MSG keyword. In writer, the function of setting encode to true is to submit data in a habitual way, rather than in a JSON stream. This is described in the author's book. The role of the configuration item root is the same as that of reader, indicating that data can be obtained by reading the data keyword. The configuration item allowsingle is used to determine whether to submit data one by one. Here, it is set to false, indicating that data cannot be submitted one by one, that is, all modified data will be submitted once, it can be obtained within the data keyword.

Then define the role store. Here, for the sake of simplicity, the role data will not be retrieved from the server and will be directly defined in the store. Create the roles. js file in the scripts \ app \ store \ directory and add the following code to the file:

Ext. Define ("simplecms. Store. Roles ",{

Extend: 'ext. Data. arraystore ',

Fields: ["text"],

Data: [["common user"], ["System Administrator"]

})

 

Now you need to write a controller for user management, create the users. js file under the scripts \ app \ controller directory, and add the basic definition of the controller:

Ext. Define ('simplecms. Controller. users ',{

Extend: 'ext. App. controller ',

 

Init: function (){

This. Control ({

});

}

 

});

 

 

 

Well, now we need to consider what the controller needs, because its view needs to use the user model and the store of the user and role, so we need to add the models configuration item and stores configuration item. The Code is as follows:

Models :[

'User'

],

 

Stores :[

'Users ',

'Roles'

],

 

View is also essential, so Add the following code:

Views :[

'Users. view'

],

 

Note the name structure of the View class. Users is used in the code. view: when creating a view, you need to create the users directory under the \ scripts \ app \ view directory, and then create the view. JS file. This can be created based on your own needs. For example, if you do not want to create a directory, you can directly use usersview as the view name. When the project is small, there are not many files, so there is no problem with naming. But if there are large projects and many files, you must pay attention to the file with the same name. Therefore, it is a good way to use directory to differentiate views, is a good habit.

To add a View to the tab Panel of the main panel, you need to reference the tab panel and add the refs configuration item. The Code is as follows:

Refs :[

{Ref: "userpanel", selector: "# userpanel "}

],

 

In the code, the ref configuration item will generate a reference method, such as the current code, you can get the Panel through getuserpanel. The selector configuration item is the Panel selector, and its ID is used here.

Now, you have to consider how to load the controller and add the view to the Panel. When defining the controller, there is one init method. Here you can perform some initialization operations, so you can add the view to the panel here and modify the code in the init method as follows:

Init: function (){

VaR me = This,

Panel = me. getuserpanel (),

View = ext. widget ("usersview ");

Panel. Add (View );

Me. Control ({

});

}

 

 

The getuserpanel method called by the Code is automatically generated in the refs configuration item definition. After obtaining the Panel through this method, add the created user view to the Panel through the add method.

Now switch to the main panel controller mainpanel. js. In the activate event managed by the user, delete the console statement, call the getcontroller method to load the controller, and call the Controller's init method. The Code is as follows:

'# Userpanel ':{

Activate :{

Single: True,

FN: function (panel ){

This. application. getcontroller ('users'). INIT ();

}

}

}

 

The rest is to create a view.