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:300, enableKeyEvents:true, // 开启键盘事件 listeners:{ keyup:function(that, e, eOpts){ var query = that.getRawValue(); // 获取输入的文本值 that.doQuery(query); // 执行搜索 } } }
总结
- combo自动搜索分remote模式和local模式,配置参数有差异。
- local模式下中文搜索会失败,使用keyup事件实现搜索功能。
Time is a great teacher, but unfortunately it kills all its pupils.