使用EditorGird，可以直接在表格执行添加、删除、修改和查找等操作，然后一次性保存。可动态修改某个单元格，保存时进行检查，为空无法保存，验证信息给予提示等。
14.1制作一个简单的EditorGrid
（1）、在生成Ext.grid.ColumnModel的列时加上editor配置项。
{
header : '名称',
dataIndex : 'name',
width : 100,
sortable : true,
editor:new Ext.Editor(new Ext.form.TextField({
allowBlank:false //不能为空，为空无法保存
}))
}
（2）、生成Ext.grid.EditorGridPanel，不再是Ext.grid.GridPanel。
Ext.grid.GridPanel中的配置项在EditorGridPanel中也是可以使用的。
（3）、默认情况下，单击单元格实现编辑，如果要单击编辑，则在EditorGridPanel中将clicksToEdit设置为1即可。
clicksToEdit:1, // 默认是2，双击编辑表格。
效果：
14.2添加、删除行
在表格顶部增加一个工具条，包含2个按钮：添加一行和删除选中行。
单击添加按钮时，新加一行到当前页的最后一行。
Toolbar中’-‘是按钮与按钮之间的分隔符。
代码如下：
tbar:new Ext.Toolbar(['-',
{
text:"添加一行",
handler:function() {
// 定义一个记录集，相当于一个类。Record中不为空的字段在新增后就会显示Record中给的值。
var p =new Ext.data.Record({
id:Ext.id(),//ext自动生成唯一值
name:"",
sex:"",
birthday:"2000-10-10",
description:"default description"
});
//停止编辑
grid.stopEditing();
//插入到一页的最后一行
store.insert(PAGE_SIZE,p);
//提示你编辑，输入内容
grid.startEditing(PAGE_SIZE,3);
}
},
'-',{
text:"删除选择的行",
handler:function() {
Ext.Msg.confirm("提示","确认要删除吗？",function(res) {
if (res =="yes") {
var sm =grid.getSelectionModel();
//获取选中的行
var row =sm.getSelected();
//删除这一行
store.remove(row);
}
});
}
}
])
效果：
那，现在单击“添加一行”，
可以看到，在最后一行追加了一行，且自动将光标切换到“名称”这一列提示我们输入数据。编号、生日、描述这3个列都有了值，就是我们定义Record是赋的值。
单击删除按钮，会提示是否删除，单击“yes”，则选中的行就被从表格中删除了。
14.3保存修改结果
使用上面介绍的添加行的方式，通过store.modified可以获取新增的行。下面在表格顶部添加一个按钮，保存修改结果。
代码：
'-',{
text:"保存",
handler:function() {
//获取修改的数据
var m =store.modified.slice(0);
var jsonArray =[];
Ext.each(m,function(item) {
jsonArray.push(item.data);
});
// Ajax请求后台，保存数据
Ext.Ajax.request({
url:'/myExt2.3/SaveEditorGridServlet',
success: function(req) {
alert(req.responseText);
Ext.Msg.show({
title:"提示",
msg:data,
buttons:Ext.Msg.OK,
icons:Ext.MessageBox.INFO
});
},
failure: function(data) {
Ext.Msg.show({
title:"提示",
msg:data,
buttons:Ext.Msg.OK,
icons:Ext.MessageBox.ERROR
});
},
headers: {
'my-header': 'foo'
},
params: {
data:decodeURIComponent(Ext.encode(jsonArray))
}
});
}
}
后台获得的数据是Json格式，形如：
[
{"id":"ext-gen130","name":"","sex":"df","birthday":"2000-10-10","description":"defaultdescription"},
{"id":"ext-gen154","name":"上德律风","sex":"男","birthday":"2000-10-10","description":"defaultdescription"}
]
这是我新增2行的结果，新增后要修改，不然传递给后台的json数据就是[]。
在Ajax请求完毕后，后台可以返回任意格式，在页面进行解析。
先通过responseText来获取返回的结果。如果是文本就直接使用；如果是Json格式，就使用Ext.decode()函数将Json格式字符串转成Json对象，再进行使用。