本文从今天开始,我要做的就是不断的更新,不断的披露ExtJS 3.4的BUG并修复它。需要注意的是版本为3.4而不是4.0,因为4.0改动和变化比较大,所以不要对号入座。
嘿嘿,本人不怎么写东西,不过因为这些BUG困扰了我很久,所以很蛋疼,拔一拔以泄心头之恨。
本文指出的Bug修复方式不会修改原有代码,只需要外部引入一个文件即可。
不管你是否正在用该框架,或者曾经使用该框架,请注意您的ExtJS 的版本为3.4。
另外,我不保证每天更新,所以写不写文章取决于我工作中遇到了BUG。好了开拔。
观看本文需要有点Javascript基础,这个需要注意。
BUG 来源 Ext.data.DataStore
BUG 描述,引起经过使用JsonWriter进行数据自动存储。
触发BUG配置:
Ext.data.JsonWriter -> listfu : true
Ext.data.DataStore -> autoSave : true
Ext.data.DataStore -> writer 设置为listfu的JsonWriter
满足以上条件即可触发这个BUG
触发环境:
通过 Ext.data.Store的remove方法删除两条及以上数据时。
红色为引起BUG源码部分:
Ext.data.Store
remove : function(record){
if(Ext.isArray(record)){
Ext.each(record, function(r){
this.remove(r);
}, this);
return;
}
var index = this.data.indexOf(record);
if(index > -1){
record.join(null);
this.data.removeAt(index);
}
if(this.pruneModifiedRecords){
this.modified.remove(record);
}
if(this.snapshot){
this.snapshot.remove(record);
}
if(index > -1){
this.fireEvent('remove', this, record, index);
}
},
清单一
相关代码:
if (this.writer) {
this.on({
scope: this,
add: this.createRecords,
remove: this.destroyRecord,
update: this.updateRecord,
clear: this.onClear
});
}
清单二
destroyRecord : function(store, record, index) {
if (this.modified.indexOf(record) != -1) {
this.modified.remove(record);
}
if (!record.phantom) {
this.removed.push(record);
record.lastIndex = index;
if (this.autoSave === true) {
this.save();
}
}
},
清单三
好了,我简单说明一下这个BUG,因为 Store 自行添加了事件remove,所以在remove一个record(Ext.data.Record)时,会触发一个remove事件。
如清单一种的红色代码部分,这个事件被调用了。这个方法被传递到destroyRecord方法上,这时候注意代码中的this.autoSave片段。
因为开启了listful和autoSave,所以就会使用一个ajax调用。
但是因为我们删除的数据是多个,所以这个调用会被多次执行。
删除一条就执行一次,删除两条就执行两次,删除三条就执行三次。
以下是修复这个BUG的外部代码,请在ext-all.js或ext-all-debug.js后引入这段代码,你可以创建一个新的文件用于引用。
Ext.apply( Ext.data.Store.prototype, {
_bug0_remove : function( record ) {
var index = this.data.indexOf(record);
if(index > -1){
record.join(null);
this.data.removeAt(index);
}
if(this.pruneModifiedRecords){
this.modified.remove(record);
}
if(this.snapshot){
this.snapshot.remove(record);
}
if(index > -1) {
this.fireEvent('remove', this, record, index);
}
},
// 覆盖已有的方法。
remove : function(record) {
if(Ext.isArray(record)) {
Ext.each(record, function(r){
this._bug0_remove(r);
}, this);
} else {
this._bug0_remove(record);
}
if (this.autoSave === true) {
this.save();
}
},
// 覆盖已有的方法。让方法支持多个record。
destroyRecord : function(store, record, index) {
if (this.modified.indexOf(record) != -1) {
this.modified.remove(record);
}
if (!record.phantom) {
this.removed.push(record);
record.lastIndex = index;
// 除去该方法,修改调用逻辑
//if (this.autoSave === true) {
// this.save();
//}
}
},
})