ext store filter用于combobox

ext store有filter与filterBy方法可对store中的数据进行过滤，filter的用法如下：

filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) //store.filter("id",3);//store.filter("id",/[1-9]{1}/);

第一参数是store中要根据条件过滤的一个field，第二个参数为过滤条件，可以是字符串或正则表达式，三四个参数可选，filterBy的用法如下：

filterBy( Function fn, [Object scope] )

/*store.filterBy(function(record){

<span style="white-space:pre">	</span>return record.get("id") > 3;

});*/

它接收一个function，该function会对store里的每一条record进行过滤,去掉返回false的记录，这些都可以通过查阅ext api轻松掌握使用。

下面分享用store的filterBy方法过滤combobox数据出现问题的一次经历。

大致情况是这样的：有一个gridpanel其中有一列数据来自combobox，gridpanel的最后一列是一个按钮，点击按钮弹出一个window，显示修改记录的form,其它列都是textfield，而那一列数据当然是要用combobox让用户选择，现在还有个要求是gridpanel中修改有的记录时需要对combox中的记录进行约束一下，不能让它可以选择所有的，所以想到了window的show事件，在事件里对store进行过滤，但出现了一点意想不到的问题。

相信做过ext开发的朋友都能想像出以上描述的情形，由于实际项目有点复杂，不好展示代码，下面举个小例子模拟一下：

var data = [
		[1, 1000],
		[2, 2000],
		[3, 3000],
		[4, 4000],
		[5, 5000]
	]
	var store = new Ext.data.SimpleStore({
		fields: ["id", "value"],
		data: data
	})
	
	var comb = new Ext.form.ComboBox({
		store: store,
		valueField: "id",
		displayField: "value",
		mode: 'local',
		triggerAction: 'all',
	})

	var win = new Ext.Window({
		title: 'window',
		width: 400,
		height: 300,
		items: [comb],

<span style="white-space:pre">		</span>closeAction: 'hide',
		listeners: {
			'show': function(){
				store.filterBy(function(record){
					return record.get("id") > 3
				});
			}
		}
	})
	
	var button = new Ext.Button({
		text: 'show',
		renderTo: Ext.getBody(),
		handler: function(){
			win.show();
		}
	})

如代码如示，定义了一个button用于显示window，window里有个combobox，在show事件中对store进行过滤。点击button再点combox发现并没有过滤掉store,而关闭窗口，第二次显示window的时候才过滤掉，感觉非常的奇怪

找了好久都没找到问题的原因，最后想到了一个办法，增加一个按钮，用来随时获得store的数据总数

var button = new Ext.Button({
		text: 'getCount',
		renderTo: Ext.getBody(),
		handler: function(){
			alert(store.getCount());
		}
	});

于是第一次显示window的时候点击“getCount”按钮，却发现弹出的总数是2,点击combobox再去获得总数又变成了5,相当于没过滤

试验了好多次最后总结出规律，combobox在第一次点击时总会获取store里所有的数据，把之前的过滤给清除掉

这样的效果不是太别扭了，得想个什么办法才行，于是继续百度谷哥，搜索了大半个小时，没找到相关的信息，最后在无奈中只好拿出ext api出来翻看，希望能找到一点有用的信息，从store看到gridpanel，又看到window最后终于找摸到了点着边的东西，combobox有个expand事件，在下拉框展开时触发，还不知道有没有用，先试一下，果然，解决了问题，就在combobox的expand事件中对store进行过滤，顿时欣喜若狂，代码更改如下：

var comb = new Ext.form.ComboBox({
		store: store,
		valueField: "id",
		displayField: "value",
		mode: 'local',
		triggerAction: 'all',
		listeners: {
			'expand': function(){
				store.filterBy(function(record){
					return record.get("id") > 3;
				});
			}
		}
	})