封装的是一个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毫秒之内仅仅触发一次。有些时候会非常实用的，这就须要你自己来实现啦。