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         });