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

在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 服务端搜索过滤

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值