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); // 执行搜索
            }
        }
    }

  

总结

  1. combo自动搜索分remote模式和local模式,配置参数有差异。
  2. local模式下中文搜索会失败,使用keyup事件实现搜索功能。
posted @ 2015-12-28 17:58  贝拉巴拉  阅读(286)  评论(0编辑  收藏  举报