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爲第一列的名稱，以此類推。
連載中，請你們持續關注，本文出自個人我的網站思考者日記網