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:'表格的扩展插件--行编辑',  
         500,  
        height: 400,  
        renderTo: 'grid',  
        store: store,  
        columns: columns,  
        plugins: [rowEditing]  
    });

完整代码：

/**
 * Grid
 * 此js演示了ExtJS之基于表格的扩展插件
 */ 
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
    var columns = [
                   {header:'编号',dataIndex:'id',50,editor: {//在每行需要更改的地方加上想编辑的类型，默认textfield
                           allowBlank: false
                              }
                   },
                   {header:'名称',dataIndex:'name',280,editor:{ 
                       allowBlank: false,
                       vtype: 'email'
                          }
                   },
                   {header:'描述',dataIndex:'descn',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 + "
 修改的字段是:"+ e.context.record.fields.items[1].name +"
 修改的id为"+id);//取得更新内容
            }
            //当然这里你也可以自定义一个ajax来提交到后台，大家自由发挥，这里不多写。
        }
    });
    
    var grid = new Ext.grid.GridPanel({
        title:'表格的扩展插件--行编辑',
         500,
        height: 400,
        renderTo: 'grid',
        store: store,
        columns: columns,
        plugins: [rowEditing]
    });
    
});

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

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

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

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