extjs4可编辑表格优化

用过extjs4的同学应该都是奔着其好用的可编辑啊表格去的吧，虽然看着好用，但是用起来却伤痕累累啊。今天针对其最大的一个问题，大量数据（800以上）的表格进行编辑时，特别是在ie下，编辑单元格时，要4，,5秒才能编辑完成，这客户能接受？欲哭无泪吧。我下断点调试，从源码看，冒泡时间太多，最后发现是一个store的set方法占了很多时间。最后就是从extjs的可编辑表格编辑完成的先后事件来进行优化的。简要说明下，下面的代码，可编辑表格组件都是基于公共js封装的，也方便使用和修改，优化代码如下：

Ext.define('AM.view.BaseTreeGrid', {
extend : 'Ext.tree.Panel',
header : false, // **隐藏标题栏
// width: document.documentElement.clientWidth,
// height: document.documentElement.clientHeight,
layout : 'fit',
border : true,
rowLines : true,
columnLines : true,
//renderTo: "containertreegrid",
collapsible : true,
useArrows : true,
rootVisible : false,
multiSelect : true,
singleExpand : false,
viewConfig: {
 markDirty: false,
 loadMask:true
},
plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1,
listeners: {
        validateedit : function(editor, e) {
if (e.originalValue != e.value) {
e.record.data[editor.context.field] = e.value;
var ttr = $($(editor.context.row).find("td").get(editor.context.column.getIndex()));
var record = e.record;
var fv = editor.context.column.renderer(e.value, e, record);
ttr.find("div").html(fv);
ttr.addClass("x-grid-dirty-cell");
var columns = e.grid.columns;
for (var i=0; i<columns.length; i++) {
if (i==e.colIdx) {
continue;
}
var tc = columns[i];
var tedit = tc.getEditor(record, tc.field);
var tcr = tc.renderer(record.get(tc.dataIndex), tedit, record);
var ttrr = $($(editor.context.row).find("td").get(i));
ttrr.find("div").html(tcr);
}
}
return false;
}
}
})]
});

//公共的树形表格组件
Ext.define('AM.view.BaseTreeGrid', {extend : 'Ext.tree.Panel',header : false, // **隐藏标题栏// width: document.documentElement.clientWidth,// height: document.documentElement.clientHeight,layout : 'fit',border : true,rowLines : true,columnLines
 : true,//renderTo: "containertreegrid",collapsible : true,useArrows : true,rootVisible : false,multiSelect : true,singleExpand : false,viewConfig: { markDirty: false, loadMask:true},plugins : [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit : 1,listeners:
 { 
				//可编辑表格核心优化代码
 validateedit : function(editor, e) {//在校验方法事件中，最后返回false，阻止其后面事件的进一步发生，模拟表格编辑可在该方法中完成if (e.originalValue
 != e.value) {//给store中data赋值

e.record.data[editor.context.field] = e.value;var ttr = $($(editor.context.row).find("td").get(editor.context.column.getIndex()));var record = e.record;//界面上渲染的值，需要手动调用render函数，阻止事件后，是不会自动触发的

var fv = editor.context.column.renderer(e.value, e, record);ttr.find("div").html(fv);ttr.addClass("x-grid-dirty-cell");var columns = e.grid.columns;for (var i=0; i<columns.length; i++) {if (i==e.colIdx) {continue;}var tc = columns[i];var tedit = tc.getEditor(record,
 tc.field);var tcr = tc.renderer(record.get(tc.dataIndex), tedit, record);var ttrr = $($(editor.context.row).find("td").get(i));ttrr.find("div").html(tcr);}}return false;}}})]});