Extjs的EditorGridPanel修改数据后怎样保存到数据库

extjs的EditorGridPanel并不难,我想很多人都可以写出来,但是对于修改数据后怎样保存到数据库我想还是有好多人不太明白,下面我关于这一点就我个人的见解说一下,这里首先的配置好可以修改的列

[javascript]  view plain copy

1. var colM = new Ext.grid.ColumnModel([{  
2. header: "编号",  
3. dataIndex: "id",  
4. sortable: true,  
5. width: 40  
6. }, {  
7. header: "广告版面",  
8. dataIndex: "ad_bm",  
9. sortable: true,  
10. editor: new Ext.form.TextField({  
11. allowBlank: false  
12. })  
13. }, {  
14. header: "广告规格",  
15. dataIndex: "ad_gg",  
16. sortable: true,  
17. width: 180,  
18. editor: new Ext.form.TextField({  
19. allowBlank: false  
20. })  
21. }, {  
22. header: "客户名称",  
23. dataIndex: "ad_kh",  
24. sortable: true,  
25. width: 150,  
26. editor: new Ext.form.TextField({  
27. allowBlank: false  
28. })  
29. }, {  
30. header: "广告单价",  
31. dataIndex: "ad_dj",  
32. renderer: zhMoney,  
33. sortable: true,  
34. editor: new Ext.form.NumberField({  
35. allowBlank: false,  
36. allowNegative: false,  
37. maxValue: 100000  
38. })  
39.   
40. }, {  
41. header: "交款情况",  
42. dataIndex: "ad_jkqk",  
43. sortable: true,  
44. editor: new Ext.form.ComboBox({  
45. typeAhead: true,  
46. triggerAction: 'all',  
47. transform: 'combox',  
48. lazyRender: true,  
49. listClass: 'x-combo-list-small'  
50. })  
51. }, {  
52. header: "交款日期",  
53. dataIndex: "ad_jkrq",  
54. sortable: true,  
55. width: 150,  
56. renderer: formatDate,  
57. editor: new Ext.form.DateField({  
58. format: 'Y-m-d',  
59. disabledDaysText: 'Plants are not available on the weekends'  
60. })  
61. }, {  
62. header: "业务员",  
63. dataIndex: "ad_ywy",  
64. sortable: true,  
65. editor: new Ext.form.ComboBox({  
66. typeAhead: true,  
67. triggerAction: 'all',  
68. displayField: 'name',  
69. valueField: 'value',  
70. store: g_select_user,  
71. lazyRender: true,  
72. editable: true,  
73. listClass: 'x-combo-list-small'  
74. })  
75. }, {  
76. header: "期数",  
77. dataIndex: "ad_qs",  
78. sortable: true,  
79. renderer: _qishu,  
80. editor: new Ext.form.NumberField({  
81. allowBlank: false,  
82. allowNegative: false,  
83. minValue: 1  
84. })  
85. }, {  
86. header: "删除",  
87. dataIndex: "id",  
88. width: 50,  
89. renderer: _select  
90. }]);  

然后把它放到EditorGridPanel中就可以实现双击修改了,那么怎么知道数据被修改了?
这就需要EditorGridPanel的afteredit事件来监听

[javascript]  view plain copy

1. grid.on("afteredit", afterEdit, grid);  

这就使得当表被修改后出发afterEdit函数,下来我们看这个函数

[javascript]  view plain copy

1. function afterEdit(obj){  
2. var r = obj.record;//获取被修改的行  
3. var l = obj.field;//获取被修改的列  
4. var id = r.get("id");  
5. if (l == "ad_jkrq")  
6. var lie = Ext.util.Format.date(r.get(l), "Y-m-d");  
7. else  
8. var lie = r.get(l);  
9. Ext.Ajax.request({  
10. url: '_action.php?action=edit',  
11. params: "id=" + id + "&name=" + l + '&value=' + lie  
12. });  
13. }  

这里我的列的dataIndex取名和数据库中的列名相同,方便处理,然后使用

[javascript]  view plain copy

1. Ext.Ajax.request({  
2. url: '_action.php?action=edit',  
3. params: "id=" + id + "&name=" + l + '&value=' + lie  
4. });  

把被修改的列的名字及dataIndex,和修改后的数据通过params传递到_action.php?action=edit进行处理
看对应的php处理代码,红色部分为重点,到了这里我想大家应该明白前面为什么要dataIndex要与数据库列名相同了吧.

[php]  view plain copy

1. if($_GET['action']=="edit"){  
2. $id=$_POST['id'];  
3. $name=$_POST['name'];  
4. $value=$_POST['value'];  
5. if($name=="ad_jkrq")$value=strtotime($value);  
6. $db->exec("update dingdan set [color=Red]$name='$value' [/color]where id=$id");  
7. }