Ext中動態修改grid內容

對於Ext.grid.Panel，在這里不做過多介紹，直面主題，在Ext.grid.Panel的基礎上怎樣修改成動態列表。

一、首先要定義一下可編輯列：

var cellEditPlugin = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
});

其中clicksToEdit=1，是單擊修改；clicksToEdit=2，是雙擊修改

二、在Ext.grid.Panel定義中加入plugins: [cellEditPlugin]

var test= Ext.create('Ext.grid.Panel', {
title : 'test',
frame : true,
store : rptEb5sStore,
plugins: [cellEditPlugin]

三、在grid的列中加入editor:{xtype:'textarea'}，這樣，grid列就可編輯了，textarea是文本框

{
header : 'test',
dataIndex : 'test',
menuDisabled : true,
draggable : false，
editor:{xtype:'textarea'}
}

四、保存到數據庫中，我們需要監聽，此行數據，因為change事件中，我們無法獲得行號，我就多寫了一個click，需要聲明一個全局變量：hh,整體代碼如下：

{
header : 'test',
dataIndex : 'test',
menuDisabled : true,
draggable : false
listeners : {
click : function(field, resource, rowIndex) {
hh=rowIndex;
}
},
editor:{xtype:'textarea',listeners : {
change : function(field, newValue, oldValue) {
var id = Grid.getStore().getAt(hh).id
Ext.Ajax.request({
url : basePath + '/test/test/update.do',
params : {
id : id,
bgyy : newValue
},
success : function(response) {
unMask();
var result = Ext.decode(response.responseText);
if (result.success) {
Ext.Msg.alert('操作提示', '修改成功', function() {
xlGdStore.reload();
});
} else {
Ext.Msg.alert('操作提示', result.msgText);
}
}
});
}
}}
}

五、還有一種直接監測列表行選中的方式：

Grid.on('select', function (grid, record, rowIndex, e) {
alert('213');
});