ExtJS4.2学习(13)基于表格的扩展插件---rowEditing

鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html

--------------------------------------------------------------------------------------------



前一章说了EditorGrid可编辑表格，但是有点不方便，如果数据多的话，一次性保存未免有点不太方便。下面我们来说一个扩展插件rowEditing网上许多说了不全，比如将修改的内容提交到后台的方法。

首先，创建扩展插件方法

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来提交到后台，大家自由发挥，这里不多写。
}
});

这里注意下，提交到后台的参数里e.context.record和e.context.record.fields方法比较重要，

e.context.record为更改的这行的数据，获某个值可以用get方法。

e.context.record.fields.items为修改的这行字段名，这是一个数组集合,e.context.record.fields.items[0].name为第一列的名称，以此类推。

grid中调用插件：

var grid = new Ext.grid.GridPanel({
title:'表格的扩展插件--行编辑',
width: 500,
height: 400,
renderTo: 'grid',
store: store,
columns: columns,
plugins: [rowEditing]
});

完整代码：

/**
* Grid
* 此js演示了ExtJS之基于表格的扩展插件
*/
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
var columns = [
{header:'编号',dataIndex:'id',width:50,editor: {//在每行需要更改的地方加上想编辑的类型，默认textfield
allowBlank: false
}
},
{header:'名称',dataIndex:'name',width:280,editor:{
allowBlank: false,
vtype: 'email'
}
},
{header:'描述',dataIndex:'descn',width:150}
];

var data = [
['1','shuyangyang@aliyun.com','descn1'],
['2','shuyangyang@163.com','descn2'],
['3','shuyangyang@yahoo.com.cn','descn3'],
['4','shuyangyang@tom.com','descn4'],
['5','shuyangyang@sina.com','descn5']
];

var store = new Ext.data.ArrayStore({
data: data,
fields: [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
]
});
store.load();

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[1].name +"\n 修改的id为"+id);//取得更新内容
}
//当然这里你也可以自定义一个ajax来提交到后台，大家自由发挥，这里不多写。
}
});

var grid = new Ext.grid.GridPanel({
title:'表格的扩展插件--行编辑',
width: 500,
height: 400,
renderTo: 'grid',
store: store,
columns: columns,
plugins: [rowEditing]
});

});

后记：RowEditing的缺点：当前编辑的对象限于一行中的一个单元格（列），编辑后要么选择保存，要么选择取消，怎样在一行中的所有列全部编辑完后提交呢？

查询API，是这样介绍RowEditing的：

“这个Ext.grid.plugin.RowEditing插件将会注入在grid的进行级别的编辑的时候。 在开始编辑的时候， 一个小的浮动对话框会显示相应的行。每个编辑栏将显示一个字段进行编辑。 还有按钮用来保存和取消所有的编辑。”

看来RowEditing针对的对象只是一个字段？