97. ExtJS之EditorGridPanel afteredit属性-CSDN博客

转自:https://zccst.iteye.com/blog/1328869
  1 之前大多用Ext.grid.GridPanel，现在需要可编辑功能，发现比以前稍复杂一些。
  2 就是需要对指定列进行可编辑设置，并获取编辑后的值，存入数据库。
  3 1，对指定列进行可编辑设置
  4 比如下拉菜单、日历等。
  5 
  6 2，获取编辑后的值
  7 可使用afteredit事件，并用panel的on()方法监听。
  8 当然也有beforeedit事件。
  9 
 10 不过，也可以直接在可编辑的下拉菜单中使用listener监听并存入数据库。
 11 Js代码  收藏代码
 12 
 13     listeners : {  
 14         'select' : function(obj, data, index){  
 15             selectedValue = data.data.name;  
 16       
 17         }  
 18     }  
 19 
 20 
 21 3，存入数据库
 22 使用Ext.Ajax.request({url:URL,params:"key:value",success:function(){},failure:function(){}});
 23 
 24 例子
 25 Js代码  收藏代码
 26 
 27     var store = new Ext.data.JsonStore({  
 28         url: 'api/divide_suit.php?action=suitList',  
 29         listeners:{  
 30             'loadexception' : function(e){  
 31                 alert(e.toString());  
 32             }  
 33         },  
 34         fields:[  
 35             {name:'id'},  
 36             {name:'suit'},  
 37             {name:'type'}  
 38         ]  
 39     });  
 40     store.load();  
 41       
 42     var colM=new Ext.grid.ColumnModel([  
 43         {header:"编号",dataIndex:'id',width:80,sortable:true},  
 44         {header:"套餐名称",dataIndex:"suit",width:240,sortable:true},  
 45         {header:"套餐类型",dataIndex:"type",sortable:true,width:160,  
 46             editor:new Ext.form.ComboBox({  
 47                 transform:"suitTypeList",  
 48                 triggerAction:'all',  
 49                 lazyRender:true  
 50             })  
 51         }  
 52     ]);  
 53       
 54     var panel = new Ext.grid.EditorGridPanel({  
 55         baseCls: 'x-plain',  
 56         id:grid_id,  
 57         title:'将套餐分组',  
 58         closable:true,  
 59         cm:colM,  
 60         store:store,  
 61         //autoExpandColumn:2  //自动将指定列扩展至最宽。  
 62     });  
 63       
 64     panel.on("afteredit", afterEdit, panel); //EditorGridPanel的afteredit事件监听   
 65     function afterEdit(obj){   
 66            var r = obj.record;//获取被修改的行   
 67            var l = obj.field; //获取被修改的列   
 68            var suit_id   = r.get("id");  
 69         var suit_name = r.get("suit");  
 70            var suit_type = r.get(l);  
 71         //alert('suit_id='+suit_id+' suit_name='+suit_name+'  suit_type='+suit_type);return;  
 72            Ext.Ajax.request({   
 73             url: 'api/divide_suit.php?action=edit_suit_type',  
 74             params: "suit_id="+suit_id + "&suit_name="+suit_name + '&suit_type='+suit_type,  
 75             success: function(resp,opts) {  
 76                 var respText = Ext.util.JSON.decode(resp.responseText);  
 77                 if(respText.status != 0){ alert(respText.msg); };  
 78             },  
 79             failure: function(resp,opts) { Ext.Msg.alert('保存失败', "请重试！"); }  
 80         });   
 81        }  
 82 
 83 
 84 批注：其他几个参数
 85 1，grid_id
 86 2，渲染panel到什么地方。
 87 
 88 下拉菜单还需要在html中写：
 89 Html代码  收藏代码
 90 
 91     <select name="suitTypeList" id="suitTypeList">  
 92       <option value='主流套餐'>主流套餐</option>  
 93       <option value='均衡套餐'>均衡套餐</option>  
 94       <option value='存储套餐'>存储套餐</option>  
 95       <option value='其他套餐'>其他套餐</option>  
 96     </select>  
 97 
 98 
 99 
100 
101 附：获取值afteredit的几种写法
102 1，
103 grid.on('afteredit',function(e){ //获得Ext.grid.EditorGridPanel编辑信息
104       e.row;//修改過的行從0開始
105       e.column;//修改列
106       e.originalValue;//原始值
107       e.value;//新值
108     });
109 来源：http://blog.csdn.net/yanji94521/archive/2008/06/16/2
110 
111 2，
112 grid.on("afteredit", afterEdit, grid); //EditorGridPanel的afteredit事件监听
113 function afterEdit(obj){
114         var r = obj.record;//获取被修改的行
115         var l = obj.field; //获取被修改的列
116         var id = r.get("id");
117         var lie = r.get(l);
118         Ext.Ajax.request({
119             url: '_action.php?action=edit',
120             params: "id=" + id + "&name=" + l + '&value=' + lie
121         );
122     }
123 来源：http://hi.baidu.com/_ollie/blog/item/c9f8fac305f7fe53b219a8f8.html
124 
125 3，
126 grid.on("afteredit",afterEidt,grid);
127 function(obj)
128 {
129    obj.row;;//修改过的行从0开始
130    obj.column;//修改列
131    obj.originalValue;//原始值
132    obj.value;//修改后的值
133    obj.grid;//当前修改的grid
134    obj.field;//正在被编辑的字段名
135    obj.record;//正在被编辑的行
136 
137 }
138 
139 
140 
141 
142 但是，transform属性是将现有的<select>元素转化为ComboBox，transform的值是<select>元素的id，dom节点或元素。在设置了transform的情况下，如果将包含这个ComboBox的panel销毁，再重新生成一个该panel的对象时，会出现错误：s is null。出错的位置在ext-all-debug.js中，就是找不到当前的select元素。目前，这个问题不知如何解决。
143 
144 一种替代的方法是直接用store对ComboBox进行初始化。
145 Js代码  收藏代码
146 
147     var colM=new Ext.grid.ColumnModel([  
148             {header:"编号",dataIndex:'id',width:80,sortable:true},  
149             {header:"套餐名称",dataIndex:"suit",width:240,sortable:true},  
150             {header:"套餐类型",dataIndex:"type",width:160,  
151                 editor:new Ext.form.ComboBox({  
152                     id : 'x-combo-list-small',  
153                     store: ['主流套餐','均衡套餐','存储套餐','其他套餐'],  
154                     allowBlank:false,  
155                     triggerAction: 'all',  
156                     emptyText:'套餐类型...'  
157                 })  
158             }  
159         ]);  
160       
161         var panel = new Ext.grid.EditorGridPanel({  
162             baseCls: 'x-plain',  
163             id:grid_id,  
164             title:'将套餐分组',  
165             closable:true,  
166             cm:colM,  
167             store:store,  
168             frame:true,  
169             clicksToEdit:1,//默认是点击2次  
170             loadMask: {  
171                 msg: '数据获取中,请稍候...'  
172             },  
173             region:'center'  
174             //autoExpandColumn:2  //自动将指定列扩展至最宽。  
175         });