Extjs combobox 实现搜索框的效果

Posted 2020-07-19 googlg

目的：使用combobox实现一个类似搜索框的效果，即用户输入内容后，出现相关下列列表，提供选择。

实现：extjs3 中combobox自身带这个功能。

  需要设置的属性：

1. hideTrigger: true, // 去掉右侧的小标志

2. mode : ‘remote‘, // 数据需要远程下载

3. minChars:2, // 设置用户输入字符多少时触发查询

4. queryParam: ‘userinput‘, // 设置用户传递参数的名称，默认是 ‘query’

 

store的定义：

  var ds = new Ext.data.Store({
      proxy : new Ext.data.HttpProxy({
        
      	 url : WEB_CONTEXT+‘xxx.action‘,
         method:‘post‘
        }),
      reader : new Ext.data.JsonReader({}, [{
           name : ‘VALUE‘
          }, {
           name : ‘TEXT‘
          }])
  });

　　当用户输入2个字符时，加载store，调用后台，在后台可以取得用户输入内容。 （"userinput")，在后台处理的时候以用户输入为参数，得到想要的store内容。

可以添加 beforquery 函数看下

 

	  listeners:{
                    beforequery:function(qe){
                               var para = qe.query ;   
                    }
              }

　chrome中断点调试

  在源码中发现：

 

doQuery : function(q, forceAll){
        q = Ext.isEmpty(q) ? ‘‘ : q;
        var qe = {
            query: q,
            forceAll: forceAll,
            combo: this,
            cancel:false
        };
        if(this.fireEvent(‘beforequery‘, qe)===false || qe.cancel){
            return false;
        }
        q = qe.query;
        forceAll = qe.forceAll;
        if(forceAll === true || (q.length >= this.minChars)){
            if(this.lastQuery !== q){
                this.lastQuery = q;
                if(this.mode == ‘local‘){
                    this.selectedIndex = -1;
                    if(forceAll){
                        this.store.clearFilter();
                    }else{
                        this.store.filter(this.displayField, q);
                    }
                    this.onLoad();
                }else{
                    this.store.baseParams[this.queryParam] = q;  //q 为用户输入内容
                    this.store.load({
                        params: this.getParams(q)  // 此处加载了store
                    });
                    this.expand();
                }
            }else{
                this.selectedIndex = -1;
                this.onLoad();
            }
        }
    },