ExtJs table control (3) ---- cell editing and modification submission

ExtJs table control (3) ---- cell editing and modification submission

The EditorGrid control of ExtJs provides a way to dynamically modify a cell. To use the editing plug-in, you must first add the editor attribute to the column you need, only columns with the editor attribute can be edited. At the same time, we can add some restrictions or constraints to the editor. For example, if the cell to be edited is not empty, use the following method to define the column:

Var columns = [{header: 'First column', dataIndex: 'first', renderer: datarender, editor: {allowBlank: false }}, {header: 'Second column ', dataIndex: 'second', editor: {allowBlank: false },{ header: 'Third column ', dataIndex: 'third', editor: {allowBlank: false }}, {header: 'column 4', dataIndex: 'four ', format: 'Y-m-d H: I: s', width: 120, editor: {allowBlank: false}];

Then enable the CellEditing plug-in GraidPanel.

Plugins: [Ext. create ('ext. grid. plugin. CellEditing ', {clicksToEdit: 2 // set the number of clicks to trigger the editing plug-in. The default number is 2})],

In this way, you can double-click the corresponding cell to edit the cell. After modifying the cell, you need to transfer the modified content to the background for processing. Here we add a top toolbar for the GridPanel, then there is a Save button. Click Save to modify the data for transmission.

The following is an example:

Tbar: [{text: 'save', handler: function () {var m = store. getModifiedRecords (). slice (0); var jsonArray = []; Ext. each (m, function (item) {jsonArray. push (item. data) ;}); Ext. ajax. request ({method: 'post', url: "grid_StoreMsg", success: function (response) {Ext. msg. alert ('hint ', 'success') ;}, failure: function () {Ext. msg. alert ('hint ', 'failed');}, params: 'jsonarray =' + encodeURIComponent (Ext. encode (jsonArray)}) ;}]

Here we first use store. getModifiedRecords (). Obtain the modified data in the store. Then, the Slice (start, [end]) function returns a new array that contains the elements specified from start to end, but does not contain the end element. For example, an array with a length of 5,. slice (2nd) is a new array consisting of, 3, and 4 elements in the returned array (note that the following table starts from 0 ), if start or end is a negative number, the negative number is added with the length of the original array for calculation, for example,. slice (-2, 4) can be treated as. slice (3, 4 ). In the above Code, slice (0) is used to copy the data in store. getModifiedRecords () to ensure that the original data is not affected.

Ext. each (array, function) is used to traverse the array and call the function for each item in the array. If array is not an array, It will be executed once. If the returned result is false after a function is called in the array, the traversal ends and exits.