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',80,sortable:true},  
        {header:"套餐名称",dataIndex:"suit",240,sortable:true},  
        {header:"套餐类型",dataIndex:"type",sortable:true,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',80,sortable:true},  
            {header:"套餐名称",dataIndex:"suit",240,sortable:true},  
            {header:"套餐类型",dataIndex:"type",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  //自动将指定列扩展至最宽。  
        });