一个简单的ExtJS搜索建议框

Posted 2020-10-03 mthoutai

封装的是一个Ext4.2的组件，继承并兼容于Ext的ComboBox.

实现原理非常easy，在 combo 中监听 keyup 事件就可以.

    搜索建议的Combo.基本上全然兼容, 使用方式与Combo下拉框一样.
    须要后台程序依据keyword进行搜索建议.

源代码例如以下: 

// 搜索建议框,使用时请适当改动包名
Ext.define("CNC.view.SearchComboBox",{
    extend: "Ext.form.field.ComboBox",
    alias : ["widget.searchCombo", "widget.searchComboBox", ],
    editable: true,
    enableKeyEvents : true,
    searchWordKey : "keyword", // 搜索的属性名称
    searchSizeKey : "searchSize", // 传递数量的KEY
    searchSize : 5, // 返回的数量
    initComponent : function() {
        //
        var keyup = "keyup";
        this.addListener(keyup, this.keyupFn, this)
        this.callParent();
    }
    , keyupFn : function(combo, e){
        //
        var store = this.getStore && this.getStore();
        if(!store){  return; }
        //
        var proxy = store.getProxy();
        if(!proxy){ return; }
        // 获取输入的文本内容
        var text = this.getRawValue() || "";
        // 设置到參数里面
        var extraParams = proxy.extraParams || {};
        proxy.extraParams = extraParams;
        //
        var searchWordKey = this.searchWordKey;
        var searchSizeKey = this.searchSizeKey;
        var searchSize = this.searchSize || 5;
        // 设置到參数里面
        extraParams[searchWordKey] = text;
        extraParams[searchSizeKey] = searchSize;

        // 使用 store 载入
        store.load();
    }

});

组件使用配置:

    {
        xtype: ‘searchCombo‘,
        fieldLabel: ‘XXXX属性‘,
        name: ‘xxxxName‘,
        editable: true,
        displayField: ‘xxxName‘,
        valueField: ‘xxxID‘
        searchWordKey : "keyword", // 搜索的属性名称
        searchSizeKey : "searchSize", // 传递数量的KEY
        searchSize : 5, // 返回的数量
        store: Ext.create(‘XXX.xxx.xxxStore‘, {
            proxy : {
                type: ‘ajax‘,
                api : {
                    read : ‘xxx/xxx/listBy.json‘
                },
                actionMethods: {
                    read   : ‘POST‘
                },
                reader: {
                    type: ‘json‘,
                    root:‘data‘,
                    totalProperty: ‘totalCount‘,
                    messageProperty:‘message‘
                },
                extraParams: {
                    xxxname : ‘xxxvalue‘
                }
            }
        })
    }

Contoller 使用方式, 相似以下这样:

 var acType = "";
 var acTypeName = "";
 var acTypeCombo = XXXForm.query(‘searchCombo[name=acType]‘)[0];
 if(acTypeCombo){
	acType = acTypeCombo.getValue();
	acTypeName = acTypeCombo.getRawValue();
}

假设要监听事件,应该监听 select 事件:

 select(combo, records, eOpts )

欢迎留言。

说明: 仅仅支持远程载入的Store。

当然,也能够进行定制。如监听多个事件：

    initComponent : function() {
        //
        var keyup = "keypress";
        var change = "change";
        var active = "active";
        this.addListener(keyup, this.keyupFn, this)
        this.addListener(change, this.keyupFn, this)
        this.addListener(active, this.keyupFn, this)
        this.callParent();
    }

还能够对反复的文本进行拦截，避免过多请求：

        // 获取输入的文本内容
        var text = this.getRawValue() || "";
        text = text.trim();//.replace(/\w/g, "");
        if(text == this.prevKeyWord){
            return;
        }
        //
        this.prevKeyWord = text;

上面代码中凝视掉的部分, 是用正則表達式将数字字母给清理掉,有些中文输入法会有这样的问题。
此外，你还能够使用延迟函数，比方500毫秒之内仅仅触发一次。有些时候会非常实用的，这就须要你自己来实现啦。