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

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

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