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

首先,创建扩展插件方法

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为第一列的名称,以此类推。
连载中,请大家持续关注,本文出自我的个人网站