Use and update of Extjs4 RowEditing

How to flexibly and quickly master the application of the RowEditing component should meet the requirements of everyone. Today I will give you a detailed description of the use of this component. 1. Create var rowEditing = Ext. create ('ext. grid. plugin. rowEditing ', {pluginId: 'rowediting', saveBtnText: 'save', cancelBtnText: "cancel", autoCancel: false, clicksToEdit: 2 // double-click to modify 1-click 2-double-click 0-to cancel double-click/Click Event}); 2. Define the plug-in Ext. define ('subbody _ grid', {extend: 'ext. grid. panel ', alias: 'widget. subBody_Grid ', collapsible: false, iconCls: 'icon-grid', // frame: true, // display the entire frame of the grid. height: window. innerHeight, border: true, LoadMask: true, columnLines: true, // display the column line selType: 'rowmodel', plugins: [rowEditing], // defines the use of the plug-in columns: [{dataIndex: "Partno ", width: 100, sortable: true, // flex: 1 // take part in the grid width minus the fixed column width; text: 'material number'}, {dataIndex: "PurQty ", width: 70, editor: 'numberfield', // edit the field setting to be changed and specify the renderer: Ext. util. format. numberRenderer ('0. 00 '), align: 'right', sortable: true, text: 'quantity purchased'}, {dataIndex: "Deli VeryDate ", width: 90, renderer: Ext. util. format. dateRenderer ('Y-m-d'), editor: 'datefield ', align: 'right', sortable: true, text: 'delivery Time '........... The following content is omitted ........ 3. Define and save the update event. But how do I save the changes ??? Whether added or modified, the saved event is a grid edit event. You can define the edit event in two ways !!!! 1. the method defined at creation is var rowEditing = Ext. create ('ext. grid. plugin. rowEditing ', {pluginId: 'rowediting', saveBtnText: 'save', cancelBtnText: "cancel", autoCancel: false, clicksToEdit: 2 // double-click Modify 1-click 2-double-click 0-you can cancel double-click/Click Event listeners: {edit: function (e) {var myMask = new Ext. loadMask (Ext. getBody (), {msg: 'is being modified. Please wait... ', removeMask: true // removed after completion}); myMask. show (); var id = e. record. get ('item'); // The update prompt page (for debugging) Ext. msg. alert ('You modified information', "the modified content is:" + e. record. get ("Item") + "\ n:" + e. field + "\ n corresponds to" + id); // obtain the update content Ext. ajax. request ({url: '/ashx/erp/purchase/PO_Form_BodySub_Upd.ashx', params: {PONum: e. record. get ('num'), Item: e. record. get ('item'), PurQty: e. record. get ('purqty '), DeliveryDate: e. record. get ('delimiterdate')}, success: function (response) {var result = Ext. decode (response. responseText); if (result. succeed) {e. record. commit (); // hide myMask. hide (); Ext. msg. show ({title: 'Operation prompt ', msg: result. msg, buttons: Ext. msg. YES, icon: Ext. msg. WARNING});} else {myMask. hide (); Ext. msg. show ({title: 'Operation prompt ', msg: result. msg, buttons: Ext. msg. YES, icon: Ext. msg. WARNING}) ;}, failure: function (response, opts) {Ext. msg. show ({title: 'Operation prompt ', msg: 'modification failed', buttons: Ext. msg. YES, icon: Ext. msg. WARNING}) ;}}}}); 2. If this parameter is not specified during definition, PO_SubPart_Grid.on ("edit", afterEdit); function afterEdit (e) {var myMask = new Ext. loadMask (Ext. getBody (), {msg: 'is being modified. Please wait... ', removeMask: true // removed after completion}); myMask. show (); var id = e. record. get ('item'); Ext. msg. alert ('You modified information', "the modified content is:" + e. record. get ("Item") + "\ n:" + e. field + "\ n corresponds to" + id); // obtain the update content Ext. ajax. request ({url: '/ashx/erp/purchase/PO_Form_BodySub_Upd.ashx', params: {PONum: e. record. get ('num'), Item: e. record. get ('item'), PurQty: e. record. get ('purqty '), DeliveryDate: e. record. get ('delimiterdate')}, success: function (response) {var result = Ext. decode (response. responseText); if (result. succeed) {e. record. commit (); // hide myMask. hide (); Ext. msg. show ({title: 'Operation prompt ', msg: result. msg, buttons: Ext. msg. YES, icon: Ext. msg. WARNING});} else {myMask. hide (); Ext. msg. show ({title: 'Operation prompt ', msg: result. msg, buttons: Ext. msg. YES, icon: Ext. msg. WARNING}) ;}, failure: function (response, opts) {Ext. msg. show ({title: 'Operation prompt ', msg: 'modification failed', buttons: Ext. msg. YES, icon: Ext. msg. WARNING });}})};