业务描述
自动匹配,顾名思义,也就是你在combo中输入一个字符串,然后代码会自动进行模糊匹配,把带有此字符串的数据展示出来,方便用户进行模糊选择!
思路解析
在做这个功能之前我们可以直观的感觉到几个业务点:
1.可以输入字符串,也就是combo是可以进行 编辑 的;
2.可以根据根据输入的字符串进行匹配,这就需要用到 事件监听 ,当用户每输入一个字符串的时候都去做一此 匹配过滤 出想要的数据进行展示;
伪代码解析
根据上面我们已有的思路,我们再去匹配自己已有的知识库可知:
1.combo的可编辑,我们在之前的博客中已经提到,要想combo是可编辑的,只需要把editable: true这个属性加进去就可以了;
2.监听事件的选择,至于我们用什么监听,这里我们选择的是 beforequery( Object queryEvent, Object eOpts ),他的作用是: 所有查询执行前触发。返回false来取消查询或设置queryEvent的Cancel属性为true。
3.我们还需要用到js的基础知识正则表达式;
具体怎么写
以下代码是我在实际应用中的代码的部分,供大家参考
{
xtype: 'combo',
name: 'projectNo',
fieldLabel: '科目名称',
labelAlign: 'right',
allowBlank: true,
displayField: 'projectName',
valueField: 'projectId',
editable: true,//为true,是可以进行编辑的意思
value: '',
emptyText: '请选择',
width: 328,
store: 'Projects',//你的数据加载源
listeners:{
//添加监听事件
beforequery : function (e) {
var combo = this,
size = 15,
idx = 1;
if (!e.forceAll){
var input = e.query;
// 检索的正则
var regExp = new RegExp(".*" + input + ".*");
// 执行检索
combo.store.filterBy(function(record, id) {
if (idx > size){
return false;
}
// 得到每个record的项目名称值
var text = record.get(combo.displayField);
var flag = regExp.test(text);
if (flag){
idx++; // 控制显示记录数
}
return flag;
});
combo.expand();
return false;
}
}
}
需要注意的地方
你的 store 不能是手动加载的,不然就没有效果,因为在进行数据匹配的时候,你的数据是没有加载的,自然就谈不上数据的匹配了,不过可以根据自己的业务需求进行修改!
其他
本博文只是笔者在实际应用中遇到的问题,比一定适合你的需求,在这里把它贴出来,只是做学习交流,还望指正,谢谢!