小熏的编程日记

ExtJS4 Store的过滤器功能用起来巨蛋疼无比，如果写ExtJS4批判，绝对能写一篇
filter()只能增加过滤器不能减，clearFilter()又一次全部清空过滤器，filterBy()会无视过滤器列表中已存在的过滤器，没有一个令人满意的

一个gridpanel，页面上有很多ComboBox作为筛选条件，用户点击这些ComboBox，对数据进行筛选
问题在于ExtJS4的Store不能单个更换过滤器，必须先清空全部的过滤器，再一个个加回来，怎么会有这种反人类的设计啊

参考源码写了一个能自由增减和替换过滤器的派生Store

/**
 * @author kuyur
 */

Ext.define('myproject.store.BaseStore', {
	extend: 'Ext.data.Store',
	addFilter: function(key, filter, value) {
		if (Ext.isString(filter)) {
			filter = {
				property: filter,
				value: value
			};
		}
		var me = this;
		var decoded = me.decodeFilters(filter);
		if (decoded.length <= 0) {
			return;
		}
		var doLocalSort = me.sortOnFilter && !me.remoteSort;
		if (!Ext.isString(key)) {
			key = key.toString();
		}
		me.filters.add(key, decoded[0]);

		if (me.remoteFilter) {
			me.load();
		} else {
			if (me.filters.getCount()) {
				me.snapshot = me.snapshot || me.data.clone();
				me.data = me.snapshot.filter(me.filters.items);
				if (doLocalSort) {
					me.sort();
				}
				if (!doLocalSort || me.sorters.length < 1) {
					me.fireEvent('datachanged', me);
				}
			}
		}
	},
	removeFilter: function(key) {
		var me = this;
		if (!Ext.isString(key)) {
			key = key.toString();
		}
		var doLocalSort = me.sortOnFilter && !me.remoteSort;
		if (me.filters.removeAtKey(key)) {
			if (me.remoteFilter) {
				me.load();
				return;
			}
			if (me.filters.getCount()) {
				me.snapshot = me.snapshot || me.data.clone();
				me.data = me.snapshot.filter(me.filters.items);
			} else {
				me.data = me.snapshot.clone();
				delete me.snapshot;
			}
			if (doLocalSort) {
				me.sort();
			}
			if (!doLocalSort || me.sorters.length < 1) {
				me.fireEvent('datachanged', me);
			}
		}
	}
});

addFilter函数第一个参数是key，标识过滤器用
第二个参数可以是过滤器对象的一个实例，也可以是过滤器的定义{filterFn: function(record){}}，还可以是数据模型的字段名，当作为字段名（字符串）使用时，需要传入第三个参数作为字段值
addFilter可以新添加一个过滤器，也可以覆盖旧的过滤器

removeFilter很简单，就是移除一个过滤器

相关文章:

定制自己的ExtJS4的timefield控件 ExtJS4本地化 JavaScript对象当map使 Dewplayer播放列表生成器 DOM元素查询函数getElementsByClassName 扩展Google Closure的UI库：支持z-index的Dialog 一句代码让JavaScript阻塞N秒 Google JavaScript Style Guide 中文简要翻译 – Style Rules部分