作者：zccst

之前大多用Ext.grid.GridPanel，現在需要可編輯功能，發現比以前稍復雜一些。
就是需要對指定列進行可編輯設置，并獲取編輯后的值，存入數據庫。
1，對指定列進行可編輯設置
比如下拉菜單、日歷等。

2，獲取編輯后的值
可使用afteredit事件，并用panel的on()方法監聽。
當然也有beforeedit事件。

不過，也可以直接在可編輯的下拉菜單中使用listener監聽并存入數據庫。

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

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

例子

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中寫：

<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進行初始化。

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 //自動將指定列擴展至最寬。
});


如果您覺得本文的內容對您的學習有所幫助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]

總結

以上是生活随笔為你收集整理的ExtJS之EditorGridPanel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。