[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 服務端搜索過濾