拔一拔 ExtJS 3.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();
			//}
        }
    },
    
})