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

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

 var colM = new Ext.grid.ColumnModel([{
 header: "编号",
 dataIndex: "id",
 sortable: true,
 width: 40
 }, {
 header: "广告版面",
 dataIndex: "ad_bm",
 sortable: true,
 editor: new Ext.form.TextField({
 allowBlank: false
 })
 }, {
 header: "广告规格",
 dataIndex: "ad_gg",
 sortable: true,
 width: 180,
 editor: new Ext.form.TextField({
 allowBlank: false
 })
 }, {
 header: "客户名称",
 dataIndex: "ad_kh",
 sortable: true,
 width: 150,
 editor: new Ext.form.TextField({
 allowBlank: false
 })
 }, {
 header: "广告单价",
 dataIndex: "ad_dj",
 renderer: zhMoney,
 sortable: true,
 editor: new Ext.form.NumberField({
 allowBlank: false,
 allowNegative: false,
 maxValue: 100000
 })

 }, {
 header: "交款情况",
 dataIndex: "ad_jkqk",
 sortable: true,
 editor: new Ext.form.ComboBox({
 typeAhead: true,
 triggerAction: 'all',
 transform: 'combox',
 lazyRender: true,
 listClass: 'x-combo-list-small'
 })
 }, {
 header: "交款日期",
 dataIndex: "ad_jkrq",
 sortable: true,
 width: 150,
 renderer: formatDate,
 editor: new Ext.form.DateField({
 format: 'Y-m-d',
 disabledDaysText: 'Plants are not available on the weekends'
 })
 }, {
 header: "业务员",
 dataIndex: "ad_ywy",
 sortable: true,
 editor: new Ext.form.ComboBox({
 typeAhead: true,
 triggerAction: 'all',
 displayField: 'name',
 valueField: 'value',
 store: g_select_user,
 lazyRender: true,
 editable: true,
 listClass: 'x-combo-list-small'
 })
 }, {
 header: "期数",
 dataIndex: "ad_qs",
 sortable: true,
 renderer: _qishu,
 editor: new Ext.form.NumberField({
 allowBlank: false,
 allowNegative: false,
 minValue: 1
 })
 }, {
 header: "删除",
 dataIndex: "id",
 width: 50,
 renderer: _select
 }]);

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

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

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

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

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

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

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

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