记录一下Ext js开发中遇到的下拉框检索需求。

由于数据多，Extjs的组件下拉框显示数据多，不好选择，需要能在输入框输入字段，然后下拉框只显示输入字段相关的内容，进行一个模糊查询，并且能够支持反复匹配显示相关的内容。

最终找到相关的关键性操作：combo.store.filterBy，使用store的过滤器方法。

以下为具体代码：

"类型 ",{xtype:"combo",//combo为下拉框组件width:150,id:'kind',store:getStore(true),//我这里写了方法来获取store，这里的store是你的下拉框数据来源editable: true,//输入框是否可以编辑输入displayField: "name",valueField: "kind",triggerAction : 'all',mode:'local',//remote为远程，local为本地forceSelection: true,typeAhead : true,minChars :4,//自动完成激活之前填入的最小字符queryDelay : 500,//查询延时，毫秒listeners:{ //监听器，并使用beforequery属性，来使其在点击查询按钮前触发，即不需要设置以//及点击查询按钮，输入框输入后即可自动触发显示相关的内容'beforequery' : function (e) {var combo = this,size = 15,idx = 1;if (e.query === '' || e.query == null ) {//当输入框删除内容后，清除过滤器，//显示原本store数据,使其能够再次检索combo.store.clearFilter();combo.expand();}else {if (!e.forceAll) {var input = e.query;// 检索的正则var regExp = new RegExp(".*" + input + ".*");// 执行检索combo.store.filterBy(function (record, id) {if (idx > size) {return false;}var text = record.get(combo.displayField);var flag = regExp.test(text);if (flag) {idx++;}return flag;});combo.expand();return false;}}}}}