拔一拔ExtJS3.4里你遇到的没遇到的BUG（1）

本文从今天开始，我要做的就是不断的更新，不断的披露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();			//}        }    },    })