combo 自动搜索

combo自动查询分local和remote两种模式。

remote模式

远程模式，需要配置的几个参数：

- mode:'remote'          点击下拉菜单,store才开始加载数据
 - queryParam:'query'     默认“query“，与后台交互的查询字段名称
 - minChars：4            remote模式下默认是4
           

示例代码：

{
        xtype:'combo',
        hiddenName:"orgId",
        store:orgStore,  
        displayField:"name",
        fieldLabel:"部门",
        valueField:"id",
        queryParam:'orgName',  // 自定义查询参数为orgName
        mode:"remote"
    }
           

local模式

本地模式，需要配置的参数：

- mode:'local'          数据已经被加载
 - minChars：0           remote模式下默认是0
           

注意：

• 问题分析

combo的local模式本身就带有自动搜索功能，但是中文查询可能会无效！！

combo查询实现，是调用其doQuery（q, forceAll）方法来实现，第一个参数q是输入的文本，第二参数forceAll是布尔类型，表示如果为true,输入长度小于minChars也可以强制搜索；如果为false，清除store中之前所有的过滤器。

但是问题就出在q这里，通常情况下我们输入字母、数字自动搜索都是没问题，当输入中文的时候就会出问题。那出什么问题呢？

q实际上是你键盘上键入的字符，举个例子，比如你要搜索”场“，使用拼音输入法，这里的q实际是”chang“，所以中文查询会失败

• 解决方案

使用keyup事件来触发自动搜索，参见示例代码

示例代码：

{
        xtype:'combo',
        hiddenName:"orgId",
        store:orgStore, 
        displayField:"name",
        fieldLabel:"部门",
        valueField:"id",
        mode:"local",
        maxHeight:,
        enableKeyEvents:true,  // 开启键盘事件
        listeners:{
            keyup:function(that, e, eOpts){
                var query = that.getRawValue();  // 获取输入的文本值
                that.doQuery(query); // 执行搜索
            }
        }
    }
           

总结

1. combo自动搜索分remote模式和local模式，配置参数有差异。
2. local模式下中文搜索会失败，使用keyup事件实现搜索功能。