前一章说了,但是有点不方便,如果数据多的话,一次性保存未免有点不太方便。下面我们来说一个扩展插件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来提交到后台,大家自由发挥,这里不多写。 } });
grid中调用插件:
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为第一列的名称,以此类推。
连载中,请大家持续关注,本文出自我的个人网站