Learn extjs5 with me (39 -- Design of a single module [add, modify, and delete data]), extjs539 --
Learn extjs5 with me (39 -- Design of a single module [7 add, modify, and delete data])
You can obtain data from the backend. Next, you can create, modify, and delete records for interactive transformation between the front and back ends. First, add and modify the changes in the row, that is, on the grid. You can edit rows on the grid. You need to add a plugins modification to initComponent to delete the original cellEditing and add it to rowEditing:
// You can edit this in the grid. rowEditing = new Ext. grid. plugin. rowEditing ({clicksToEdit: 2}); this. plugins = [this. rowEditing]; this. selType = 'rowmodel'; this. on ('edit', function (editor, e) {// after each row is edited and saved, all data is submitted. grid. getStore (). sync (); e. record. commit ();});Because you need to manually submit the data, change autoSync in GridStore. js to false, and do not submit the data automatically.
You also need to modify ToolbarController. js and modify the AddRecord function as follows:
// Add a record addRecord: function (button) {var grid = this. getView (). down ('lelegrid'); var model = Ext. create (grid. getStore (). model); model. set (model. idProperty, null); // if the primary key is set to null, an empty record can be automatically inserted to the first grid. getStore (). insert (0, model); // edit the first grid. rowEditing. startEdit (model );}
After the above two modifications, let's take a look at the specific modifications and new processes.
1. Data Modification, Double-click the first record in the grid to enter the modification mode. Modify the record and then Update the record.
Next let's take a look at the Save process: After you press the update button, you will execute store. sync () to save the modified data to the background. The generated link is: http: // localhost: 8888/app/rest/module/update. do/10? _ Dc = 1413266767696 & moduleName = _ ModuleGroup. The following parameters are primary keys and modified data. fields that are not modified are not added.
Spring mvc in the background of java parses the modification request sent to execute the corresponding Controller, and performs the following operations in the update function of ModuleService: 1. Determine the modified module record based on the moduleName parameter; 2. Obtain the record based on the primary key and save it as oldRecord; 3. Obtain the record again based on the primary key, save as newRecord and modify the modified fields in reflection mode. 4. Check the configuration file and check whether the module has the beforeUpdate logic verification function. If yes, pass the oldRecord before modification and the newRecord after modification as parameters to this function. If modification is not allowed, the reason for not modification is returned. If modification is allowed, continue to execute. 5. Check the constraints of other configurations. 6. Save the newRecord data to the database. 7. Write the modification records to the log file. 8. Check the configuration file and check whether the module has the afterUpdate logic verification function. If yes, run the command. 9. Because some fields may be calculated fields or modified fields in the trigger may change, read the record from the database again and organize the data before sending it back to the foreground.
When saving data, if there is a database exception, you must also handle it. A simple exception is a duplicate primary key or a conflict of unique value constraints, there is also a set of methods to automatically determine which field has a unique value constraint conflict and return the correct information to the foreground. The above is a simple process for data storage.
2. Data Addition. In the toolbar, press the "Add button" to add an empty record to the first entry of the Grid, which is in the modification state. After modifying the field values, you can save the record.
After a new record is saved, the following url will be generated: http: // localhost: 8888/app/rest/module/create. do? _ Dc = 1413268186362 & moduleName = _ ModuleGroup
Corresponding transfer parameters:
The record addition process is more complex than modification in the actual execution process. First, add the default value when adding the record: 1. Add the custom default value in the field; 2. Add the default value of the corresponding field selected in the navigation; 3. If the value of the parent module of this module is limited, add the field value of this parent module; 4. Go to the background to obtain other default values. (None of the above steps have been added)
The newly added background processing method for record is similar to that for modification. Check whether the logical operations of beforeInsert and afterInsert are performed, and write the data to the database.
3. delete a single record.Select a record, click "delete", or drag the record to the "delete" button. The following prompt is displayed:
After you press "yes", the deleted url will be sent as follows:
- Request URL: http: // localhost: 8888/app/rest/module/remove. do/01? _ Dc = 1413268927399 & moduleName = _ ModuleGroup
- Request Method: DELETE
The following parameters are:
After deletion, the record is removed from the grid. (The processing function has not been added to the background for deleting multiple records)
Note: none of the above operations have been added to the background operation exception handling code.
---------------------------------------- ***** In the test, after the second record is added and saved, the first record is generated as an update request. You need to find the cause.
... Searching, testing ......
20 minutes later,
Modifying the function in Grid. js is normal as follows:
This. on ('edit', function (editor, e) {// after each row is edited and saved, all data is submitted. grid. getStore (). sync ({callback: function () {e. record. commit ();}});});Because it is asynchronous, You need to execute model. commit in the callback function of sync, so that there is no problem for the time being.
