97. ExtJS之EditorGridPanel afteredit属性

转自:https://zccst.iteye.com/blog/1328869

1.

 之前大多用Ext.grid.GridPanel，现在需要可编辑功能，发现比以前稍复杂一些。
 就是需要对指定列进行可编辑设置，并获取编辑后的值，存入数据库。
 1，对指定列进行可编辑设置
 比如下拉菜单、日历等。

 2，获取编辑后的值
 可使用afteredit事件，并用panel的on()方法监听。
 当然也有beforeedit事件。

 不过，也可以直接在可编辑的下拉菜单中使用listener监听并存入数据库。
 Js代码  收藏代码

     listeners : {
         'select' : function(obj, data, index){
             selectedValue = data.data.name;  

         }
     }  

 3，存入数据库
 使用Ext.Ajax.request({url:URL,params:"key:value",success:function(){},failure:function(){}});

 例子
 Js代码  收藏代码

     var store = new Ext.data.JsonStore({
         url: 'api/divide_suit.php?action=suitList',
         listeners:{
             'loadexception' : function(e){
                 alert(e.toString());
             }
         },
         fields:[
             {name:'id'},
             {name:'suit'},
             {name:'type'}
         ]
     });
     store.load();  

     var colM=new Ext.grid.ColumnModel([
         {header:"编号",dataIndex:'id',width:80,sortable:true},
         {header:"套餐名称",dataIndex:"suit",width:240,sortable:true},
         {header:"套餐类型",dataIndex:"type",sortable:true,width:160,
             editor:new Ext.form.ComboBox({
                 transform:"suitTypeList",
                 triggerAction:'all',
                 lazyRender:true
             })
         }
     ]);  

     var panel = new Ext.grid.EditorGridPanel({
         baseCls: 'x-plain',
         id:grid_id,
         title:'将套餐分组',
         closable:true,
         cm:colM,
         store:store,
         //autoExpandColumn:2  //自动将指定列扩展至最宽。
     });  

     panel.on("afteredit", afterEdit, panel); //EditorGridPanel的afteredit事件监听
     function afterEdit(obj){
            var r = obj.record;//获取被修改的行
            var l = obj.field; //获取被修改的列
            var suit_id   = r.get("id");
         var suit_name = r.get("suit");
            var suit_type = r.get(l);
         //alert('suit_id='+suit_id+' suit_name='+suit_name+'  suit_type='+suit_type);return;
            Ext.Ajax.request({
             url: 'api/divide_suit.php?action=edit_suit_type',
             params: "suit_id="+suit_id + "&suit_name="+suit_name + '&suit_type='+suit_type,
             success: function(resp,opts) {
                 var respText = Ext.util.JSON.decode(resp.responseText);
                 if(respText.status != 0){ alert(respText.msg); };
             },
             failure: function(resp,opts) { Ext.Msg.alert('保存失败', "请重试！"); }
         });
        }  

 批注：其他几个参数
 1，grid_id
 2，渲染panel到什么地方。

 下拉菜单还需要在html中写：
 Html代码  收藏代码

     <select name="suitTypeList" id="suitTypeList">
       <option value='主流套餐'>主流套餐</option>
       <option value='均衡套餐'>均衡套餐</option>
       <option value='存储套餐'>存储套餐</option>
       <option value='其他套餐'>其他套餐</option>
     </select>  

 附：获取值afteredit的几种写法
 1，
 grid.on('afteredit',function(e){ //获得Ext.grid.EditorGridPanel编辑信息
       e.row;//修改過的行從0開始
       e.column;//修改列
       e.originalValue;//原始值
       e.value;//新值
     });
 来源：http://blog.csdn.net/yanji94521/archive/2008/06/16/2

 2，
 grid.on("afteredit", afterEdit, grid); //EditorGridPanel的afteredit事件监听
 function afterEdit(obj){
         var r = obj.record;//获取被修改的行
         var l = obj.field; //获取被修改的列
         var id = r.get("id");
         var lie = r.get(l);
         Ext.Ajax.request({
             url: '_action.php?action=edit',
             params: "id=" + id + "&name=" + l + '&value=' + lie
         );
     }
 来源：http://hi.baidu.com/_ollie/blog/item/c9f8fac305f7fe53b219a8f8.html

 3，
 grid.on("afteredit",afterEidt,grid);
 function(obj)
 {
    obj.row;;//修改过的行从0开始
    obj.column;//修改列
    obj.originalValue;//原始值
    obj.value;//修改后的值
    obj.grid;//当前修改的grid
    obj.field;//正在被编辑的字段名
    obj.record;//正在被编辑的行

 }

 但是，transform属性是将现有的<select>元素转化为ComboBox，transform的值是<select>元素的id，dom节点或元素。在设置了transform的情况下，如果将包含这个ComboBox的panel销毁，再重新生成一个该panel的对象时，会出现错误：s is null。出错的位置在ext-all-debug.js中，就是找不到当前的select元素。目前，这个问题不知如何解决。

 一种替代的方法是直接用store对ComboBox进行初始化。
 Js代码  收藏代码

     var colM=new Ext.grid.ColumnModel([
             {header:"编号",dataIndex:'id',width:80,sortable:true},
             {header:"套餐名称",dataIndex:"suit",width:240,sortable:true},
             {header:"套餐类型",dataIndex:"type",width:160,
                 editor:new Ext.form.ComboBox({
                     id : 'x-combo-list-small',
                     store: ['主流套餐','均衡套餐','存储套餐','其他套餐'],
                     allowBlank:false,
                     triggerAction: 'all',
                     emptyText:'套餐类型...'
                 })
             }
         ]);  

         var panel = new Ext.grid.EditorGridPanel({
             baseCls: 'x-plain',
             id:grid_id,
             title:'将套餐分组',
             closable:true,
             cm:colM,
             store:store,
             frame:true,
             clicksToEdit:1,//默认是点击2次
             loadMask: {
                 msg: '数据获取中,请稍候...'
             },
             region:'center'
             //autoExpandColumn:2  //自动将指定列扩展至最宽。
         });