一个简单的ExtJS搜索建议框

标签：extjs   搜索建议   搜索提示   下拉框   combo   

封装的是一个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‘
                }
            }
        })
    }

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

 select(combo, records, eOpts )

说明: 只支持远程加载的Store。

一个简单的ExtJS搜索建议框

标签：extjs   搜索建议   搜索提示   下拉框   combo   

原文地址：http://blog.csdn.net/renfufei/article/details/47832931