Learn Extjs5 with me. (39--design of individual modules [7 increase in data modification and deletion])

Source: Internet
Author: User


Learn Extjs5 with me. (39--design of individual modules [7 increase in data modification and deletion])
From the background to  has been able to, the following on the record of new, modified and deleted before and after the interactive transformation of the table.        The first step is to add and modify the lines within the line, that is, all on the grid. You can edit the line on the grid, you need to add a plugins in the initcomponent, delete the original cellediting, add rowediting:
The settings that can be edited in the grid this.rowediting = new Ext.grid.plugin.RowEditing ({clickstoedit:2}); this.plugins = [ This.rowediting];this.seltype = ' Rowmodel '; This.on (' Edit ', function (Editor, E) {//after each row edits are saved, the data is submitted E.grid.getstore () . sync (); E.record.commit ();});
Since it is now necessary to manually submit the data, change the AutoSync in Gridstore.js tofalse to not submit data automatically.

You will also need to modify toolbarcontroller.js to modify the AddRecord function as follows:
Added a record addrecord:function (button) {var Grid = This.getview (). Down (' Modulegrid '); var model = Ext.create (grid.getstore (). model); Model.set (model.idproperty, NULL); Set primary key to NULL to automatically add//insert empty record to First Grid.getstore (). Insert (0, model);//Edit First Grid.rowEditing.startEdit (model);}

After the two changes above, take a look at the specific changes and new procedures. 1. Modification of data, double-click the first record in the grid, go to modify mode, modify the record, and then update it with "Update".
Here's a look at the save process: When the Update button is pressed, Store.sync () is executed and the modified data is saved to the background. The resulting links are:Http://localhost:8888/app/rest/module/update.do/10?_dc=1413266767696&moduleName=_ModuleGroup, The parameters followed are the primary key and the modified data, and the fields that are not modified are not joined.


The Java Spring MVC in the background parses the requested modification request to execute the appropriate controller, and in the ModuleService the update function does the following:1. According to the parameters of the ModuleName to determine which module to modify the record;2. Obtain the record according to the primary key and save it as Oldrecord;3. The record is obtained again according to the primary key, saved as NewRecord, and the Modified field is modified by reflection;4. Review the configuration file to see if the module has beforeupdate logic validation functions, and if so, pass the modified Oldrecord and modified NewRecord records as parameters to the function. If no modification is allowed, the reason for not modifying is returned, allowing the modification and continuing the execution. 5, check the other configuration constraints. 6. Save the NewRecord data to the database. 7. Write the modification record to the log file. 8? Review the configuration file to see if the module has a logical validation function for AfterUpdate, if any. 9. Because there may be fields that are calculated or modified in the trigger, the record is read back from the database, and the data is organized so that it is sent back to the foreground.
when saving data, if there are exceptions to the database, also to be processed, simple exceptions are primary key duplication, or unique value constraints conflict, there is a set of methods to automatically determine which field unique value constraint conflict, and can return the correct information to the foreground. The above is basically a simple process for saving data.
2. New Data。 By pressing the "New button" in toolbar, a blank record is added to the first bar in the grid and is in the modified state, which can be saved after the field values have been modified.

After the new record is saved, the following URL is generated:Http://localhost:8888/app/rest/module/create.do?_dc=1413268186362&moduleName=_ModuleGroup
The corresponding transfer parameters:

Record the new process in the actual execution of the process is more complex than the modification, the first is the new time to add the default value: 1? Add a custom default value to the field, 2? Add the default value of the corresponding field selected in the navigation; 3, if the module's parent module's qualified value, it is necessary to add the parent module field value; 4. Go backstage to get the other defaults. (none of the above steps have been added at this time)
record the new background processing method and similar changes. To find logical operations that have BeforeInsert and AfterInsert, write to the database at the end.
3. Deletion of a single record. Select a record and then press "Delete" above, or drag the record to the "delete button" to display the following prompt:

after pressing "yes", the deleted URLs will be sent as follows:
    1. Request Url:http://localhost:8888/app/rest/module/remove.do/01?_dc=1413268927399&modulename=_modulegroup
    2. Request Method:delete
The following parameters are:

when the deletion is complete, the record is removed from the grid. (Multiple record deletion background has not been added to the processing function)
Note: All of the above operations do not include code for exception handling in the background operation.
------------------------------------------* * * * found in the test after the addition of a second record after saving, found that the first record has generated an update request, need to find out why.
..... Find, test ...
after 20 minutes,
Modify the function in the grid.js as follows, it is normal:
This.on (' edit ', function (Editor, E) {//] after each line edits are saved, the data E.grid.getstore () is submitted. Sync ({callback:function () { E.record.commit ();});
Because it is asynchronous execution, you need to execute model.commit in the callback function of sync so that there is no problem for the time being.




Learn Extjs5 with me. (39--design of individual modules [7 increase in data modification and deletion])


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.