ExtJs4.2如何在combo中添加自动匹配功能

业务描述

自动匹配，顾名思义，也就是你在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 不能是手动加载的，不然就没有效果，因为在进行数据匹配的时候，你的数据是没有加载的，自然就谈不上数据的匹配了，不过可以根据自己的业务需求进行修改！

其他

本博文只是笔者在实际应用中遇到的问题，比一定适合你的需求，在这里把它贴出来，只是做学习交流，还望指正，谢谢！