前一章说了EditorGrid可编辑表格，但是有点不方便，如果数据多的话，一次性保存未免有点不太方便。下面我们来说一个扩展插件rowEditing网上许多说了不全，比如将修改的内容提交到后台的方法
首先，创建扩展插件方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var
rowEditing = Ext.create(
'Ext.grid.plugin.RowEditing'
, {
saveBtnText:
'保存'
,
cancelBtnText:
"取消"
,
autoCancel:
false
,
clicksToMoveEditor: 1,
//双击进行修改 1-单击 2-双击 0-可取消双击/单击事件
autoCancel:
false
,
listeners:{
edit:
function
(e){
/*var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '正在修改，请稍后...',
removeMask: true //完成后移除
});
myMask.show();*/
console.info(e.context.record);
//e.context.record为更改的这行的数据，某个值可以用get方法，比如下面
var
id = e.context.record.get(
'id'
);
//比如修改了id，在这里就可以获取id
//e.context.record.fields.items为修改的这行字段名，这是一个数组集合,e.context.record.fields.items[0].name为第一列的名称，以此类推
// 更新提示界面(供调试使用)
Ext.Msg.alert(
'您成功修改信息'
,
"修改的内容是:"
+ e.context.record +
"n 修改的字段是:"
+ e.context.record.fields.items[0].name +
"n 修改的id为"
+id);
//取得更新内容
}
//当然这里你也可以自定义一个ajax来提交到后台，大家自由发挥，这里不多写。
}
});
|
grid中调用插件：
|
1
2
3
4
5
6
7
8
9
|
var
grid =
new
Ext.grid.GridPanel({
title:
'表格的扩展插件--行编辑'
,
width: 500,
height: 400,
renderTo:
'grid'
,
store: store,
columns: columns,
plugins: [rowEditing]
});
|
这里注意下，提交到后台的参数里e.context.record和e.context.record.fields方法比较重要，
e.context.record为更改的这行的数据，获某个值可以用get方法
e.context.record.fields.items为修改的这行字段名，这是一个数组集合,e.context.record.fields.items[0].name为第一列的名称，以此类推。
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1341477，如需转载请自行联系原作者
