[ExtJs] ComboBox 禁止搜索自动选中

最新推荐文章于 2022-09-17 11:42:03 发布

原创最新推荐文章于 2022-09-17 11:42:03 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#extjs #combobox #搜素框

ExtJS 专栏收录该内容

55 篇文章

订阅专栏

本文探讨了ExtJs中的ComboBox控件，特别是其搜索过滤功能。当设置queryMode为'local'时，ComboBox会根据displayField的首字母进行过滤。然而，输入valueField的值会导致自动选中匹配项。为防止这种情况，可以通过设置forceSelection为true，但这将禁止自定义输入。为同时允许手动选择和自定义输入，可以监听picker的childtap事件。此外，还提到了服务端搜索过滤的实现。

在ExtJs 提供的field控件里，有个comboBox控件，此控件相较selectfield 多了个最常用的搜索方法

像如下一样进行过滤搜索：

也就是ComboBox 是个自带搜索过滤的且可编辑的下拉框

想实现 搜索过滤 使用queryMode 配置项即可。

若是想在前端本地过滤，也就是把下拉项的数据提前加载好，可使用 queryMode:'local' 配置，如下：

{
         xtype: 'combobox',
         label: '可过滤搜索的Demo',
         queryMode: 'local',//配置为本地过滤 也就是前端过滤
         displayField: 'showVal',
        valueField: 'realVal',
        displayTpl: '{showVal}',
         
         store: [
             { realVal: 'A', showVal: '选项一' },
             { realVal: 'B', showVal: '选项二' },
             { realVal: 'C', showVal: '选项三' },
             { realVal: 'D', showVal: '四' },
         ],
 }

这时，在输入框内输入的值是过滤 displayField字段的值的，但是你会发现他过滤的都是值的首字母过滤。

若是想能模糊过滤或其他过滤方式，可通过配置primaryFilter 来设置自定义过滤方法

primaryFilter: {
    filterFn(record) {
        var value = this.getValue(),
        subject = record.get('showVal');
        if (Ext.isEmpty(value)) {
            return true;
        }
         
        return subject.indexOf(value) > -1;
    }
}

这里也隐藏一个问题，当我们在输入框里输入 valueFiled 绑定的值字段，例如输入“A”

发现ComboBox 会自动选定 value值为 A 的那行记录。若是我们监听下select 事件会发现

{
    xtype: 'combobox',
    label: '可过滤搜索的Demo',
    queryMode: 'local',
    displayField: 'showVal',
    valueField: 'realVal',
    displayTpl: '{showVal}',
     
    primaryFilter: {
        filterFn(record) {
            var value = this.getValue(),
            subject = record.get('showVal');
            if (Ext.isEmpty(value)) {
                return true;
                }
     
            return subject.indexOf(value) > -1;
        }
    },
    store: [
        { realVal: 'A', showVal: '选项一' },
        { realVal: 'B', showVal: '选项二' },
        { realVal: 'C', showVal: '选项三' },
        { realVal: 'D', showVal: '四' },
    ],
    listeners: {
        select: function (filed, rec) { console.log('select事件触发') }
    }
}

只要在combobox 里输入值，控制台就会输出 select事件触发监听 rec 参数发现

当输入值非 valueField 列 绑定的值时，rec有个isEntered 参数且为true。

而当输入的值为 store里绑定的值，例如输入“A”，rec 就是 {realVal:'A',showVal:'选项一'} 此行数据。且无isEntered参数

如果我们想限定，必须通过手动点击选择的或者使用Enter键确认的，才能作为选中值，可以配置forceSelection 为true。

存在的隐性问题

但是这个设置后，发现个问题，comBoBox 无法自定义设置值了

如果想实现既可以判定是手动选择又可以自定义键入，可以考虑自定义方法，如下，监听picker的childtap事件来实现。

{
    xtype: 'combobox',
    label: '可过滤搜索的Demo',
    queryMode: 'local',
    displayField: 'showVal',
    valueField: 'realVal',
    displayTpl: '{showVal}',
    //forceSelection:true,//将固定选择 去除
    primaryFilter: {
        filterFn(record) {
            var value = this.getValue(),
            subject = record.get('showVal');
            if (Ext.isEmpty(value)) {
                return true;
                }
     
            return subject.indexOf(value) > -1;
        }
    },
    store: [
        { realVal: 'A', showVal: '选项一' },
        { realVal: 'B', showVal: '选项二' },
        { realVal: 'C', showVal: '选项三' },
        { realVal: 'D', showVal: '四' },
    ],
    listeners: {
        pickercreate:function(sender, picker) {//在picker创建后的事件里 绑定childtap
            picker.on({
                childtap:function(picker, location) {
                    if(location.record) {
                        picker.getRefOwner().fireEvent('userselect', null, location.record);//自定义一个userselect事件
                    }
                }
            });
        },
        userselect: function (filed, rec) { console.log('真实点击选中触发的') }
    }
}

若是想实现服务端搜索过滤，可参考ExtJs ComboBox 服务端搜索过滤