ExtJS Table Control (iii)----cell editing and commit modification

ExtJS's Editorgrid control provides a way to dynamically modify a cell, first, if you want to use an edit plug-in, you must first add the editor property to the column you want, and only the column with the editor attribute can be edited, otherwise you cannot edit it. At the same time, we can add some restrictions or constraints in the editor, for example, prohibit the editing of the cell is empty, first in the definition of the column using the following method is defined:

    var columns = [{header: ' first column ', Dataindex: ' Primary ', Renderer:datarender,editor:{allowblank:false}}, {header: ' second column ', Dataindex: ' Second ', Editor:{allowblank:false}}, {header: ' third column ', Dataindex: ' Third ', Editor:{allowblank:false}}, { Header: ' Fourth column ', Dataindex: ' Four ', format: ' y-m-d h:i:s ', Width:120,editor:{allowblank:false}}];

Then enable the Cellediting plugin in Graidpanel.

    Plugins:[ext.create (' Ext.grid.plugin.CellEditing ', {clickstoedit:2//set a few clicks to trigger the edit plugin, the default number is 2}],

This can be achieved by double-clicking on the corresponding cell after the implementation of cell editing, when the modified cell needs to transfer the modified content to the background for processing, here we add a top toolbar for Gridpanel, and then a Save button, click the Save button will modify the data to transfer.

Here's a look at the specific 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 ', ' failure ');},params: ' jsonarray= ' +encodeuricomponent (Ext.encode (Jsonarray))});}]

Here we first use the Store.getmodifiedrecords (). Gets the modified data in the store, and then the slice (Start,[end]) function returns a new array containing the elements specified by the original array from start to end, but without the end element, such as an array of length 5 a,a.slice (1,4) is to return a new array of 2nd, 3, 4 elements in the array (note that the following table starts with 0), and if start or end is negative, the negative number is calculated by adding the length of the original array, for example: A.slice ( -2,4) can be used as a.slice (3,4). The function of slice (0) in the code above is to replicate the data in the Store.getmodifiedrecords () to ensure that the original data is not affected.

The function of Ext.each (array,function) is to iterate over an array of arrays and call the function functions for each item in the set, and if the array is not an array, it is executed once. If an item in the array calls a function and returns a result of false then the traversal ends and exits.

ExtJS Table Control (iii)----cell editing and commit modification