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

最新推荐文章于 2021-12-27 16:13:08 发布

原创最新推荐文章于 2021-12-27 16:13:08 发布 · 681 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Combo匹配 #Extjs4.2

EXT4.2 专栏收录该内容

11 篇文章

订阅专栏

本文围绕Combo自动匹配功能展开，介绍其业务是在Combo中输入字符串后进行模糊匹配并展示数据。思路上要让Combo可编辑，利用事件监听做匹配过滤。伪代码解析涉及设置属性、选择监听事件及运用正则表达式。还给出实际代码参考，提醒store不能手动加载。

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;
                    }
                }
            }