转自:https://zccst.iteye.com/blog/1328869
1.
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 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/2110 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=' + lie121 );122 }123 来源：http://hi.baidu.com/_ollie/blog/item/c9f8fac305f7fe53b219a8f8.html124 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;//当前修改的grid134 obj.field;//正在被编辑的字段名135 obj.record;//正在被编辑的行136 137 }138 139 140 141 142 但是，transform属性是将现有的元素的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 });