一个简单的ExtJS搜索建议框

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

实现原理很简单,在 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毫秒之内只触发一次,有些时候会很有用的,这就需要你自己来实现啦。

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

抵扣说明:

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

余额充值