關於Ext的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")