extjs学习札记（六-2) grid中数据的保存，添加和删除

149????????????????failure:?function(response)?{
150????????????????????Ext.Msg.alert("警告",?"数据更新失败，请稍后再试！");
151????????????????}
152????????????});
153????????}
154????????else?{
155????????????Ext.Msg.alert("警告",?"没有任何需要更新的数据！");
156????????}
157????}
158
159????//编辑后触发的事件，可在此进行数据有效性的验证
160????function?afterEdit(e)?{
161????????if?(e.field?==?"common")?{
162????????????if?(e.value?==?"大笨")?{
163????????????????Ext.Msg.alert("错误",?"大笨是人物不是植物",?function()?{?grid.startEditing(e.row,?e.column)?});
164????????????}
165????????}
166????}
167});

??? 红色部分是新增加的代码，我们首先给grid增加了一个afterEdit事件，顾名思义，该事件在编辑之后被触发，我们可以在此时对数据的有效性进行验证，在本例中，我们只是简单的让common列的值不能等于一个特定的字符串，实际的项目中可能需要对每一列用正则表达式来进行验证。在触发afterEdit事件的时候会传递一个事件对象，该对象有如下几个属性：
??? grid：当前grid。
??? record：当前行。
??? field：当前列名。
??? value：被设置的值。
??? originalValue：编辑前的值。
???? row：行索引。
??? column：列索引。
???? 我们还在grid上加了一个工具栏，上边放了一个保存按钮，用以将修改后的数据传递到服务器进行保存。由于记录的集合是一个复杂的json对象，我们需要的只是相关数据的几个，因此第137-140行对该集合进行了处理。当然，我们还需要在服务器端接收数据然后进行处理，在系列一中我们已经学习到相关的方法，这里不再赘述。我们看一看运行之后的效果图:

?

???? 通过firebug，我们可以看到向服务器投递的数据：

?

???? 接下来看看如何添加数据，我们在工具栏里边添加一个增加按钮，相关代码如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->?1tbar:?[{
?2????????????text:?"保存",
?3????????????handler:?function()?{
?4????????????????var?modified?=?store.modified;
?5
?6????????????????updateData(modified);
?7????????????}
?8????????},
?9????????????'-',
10????????????{
11????????????????text:?"增加",
12????????????????handler:?function()?{
13????????????????????var?Plant?=?store.recordType;
14????????????????????var?p?=?new?Plant({
15????????????????????????common:?'New?Plant?1',
16????????????????????????light:?'Mostly?Shade',
17????????????????????????price:?0,
18????????????????????????availDate:?(new?Date()).clearTime(),
19????????????????????????indoor:?false
20????????????????????});
21????????????????????grid.stopEditing();
22????????????????????store.insert(0,?p);
23????????????????????grid.startEditing(0,?0);
24????????????????}
25????????????}
26????????????????]

???? 在向grid中插入数据之前，必须要先获得插入数据的格式，Store类的recordType属性返回Record的构造函数，表明了数据的格式，然后通过构造函数传递数据，这样就准备好了要插入的数据了。接下来将grid的编辑状态关闭，插入数据，然后把要插入数据的第一列设置为编辑状态。运行后点击增加按钮后的效果如下：

?

???? 可以看到，在grid的最上边增加了一行，对应行索引0，第一列出于编辑状态，对应列索引1，增加行中的默认初始数据就是我们在构造函数中传递进来的数据。注意，新增加的数据在修改之前是不会保存在store的modified属性里边的。

? ? 我们再来看看如何进行删除操作。在进行删除之前，我们必须要选择需要删除的行，grid有单元格选择模型和行选择模型两种，分别以类CellSelectionModel和RowSelectionModel来表示，默认是单元格选择模型，也就是在点击单元格的时候选中的是当前单元格，可以通过配置属性selModle（可简写为sm）来指定选择模式：sm:new Ext.grid.RowSelectionModel({singleSelection:true})， 这样就把选择模型改为了行选择模型，参数singleSelect指明是否是单选的，为真的时候只能选择一行，默认是false，可以按下ctrl键或者shift键进行多行的选择。选择好之后，我们就来看看如何删除吧：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->?1tbar:?[{
?2????????????text:?"保存",
?3????????????handler:?function()?{
?4????????????????var?modified?=?store.modified;
?5????????????????updateData(modified);
?6????????????}
?7????????},
?8????????????'-',
?9????????????{
10????????????????text:?"增加",
11????????????????handler:?function()?{
12????????????????????var?Plant?=?store.recordType;
13????????????????????var?p?=?new?Plant({
14????????????????????????common:?'New?Plant?1',
15????????????????????????light:?'Mostly?Shade',
16????????????????????????price:?0,
17????????????????????????availDate:?(new?Date()).clearTime(),
18????????????????????????indoor:?false
19????????????????????});
20????????????????????grid.stopEditing();
21????????????????????store.insert(0,?p);
22????????????????????grid.startEditing(0,?0);
23????????????????}
24????????????},
25????????????"?",
26????????????{
27????????????????text:?"删除",
28????????????????handler:?function()?{
29????????????????????var?selModel?=?grid.getSelectionModel();
30????????????????????if?(selModel.hasSelection())?{
31????????????????????????Ext.Msg.confirm("警告",?"确定要删除吗？",?function(button)?{
32????????????????????????????if?(button?==?"yes")?{
33????????????????????????????????var?selections?=?selModel.getSelections();
34????????????????????????????????Ext.each(selections,?function(item)?{
35????????????????????????????????????store.remove(item);
36????????????????????????????????});
37????????????????????????????}
38????????????????????????});
39????????????????????}
40????????????????????else?{
41????????????????????????Ext.Msg.alert("错误",?"没有任何行被选中，无法进行删除操作！");
42????????????????????}
43????????????????}
44????????????}
45????????????????]