Extjs combobox 实现搜索框的效果

最新推荐文章于 2019-09-08 22:41:21 发布

转载最新推荐文章于 2019-09-08 22:41:21 发布 · 648 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/igoogleyou/p/comboboxextjs.html

本文介绍如何使用ExtJS 3中的ComboBox组件实现远程搜索功能。通过设置特定属性，如hideTrigger、mode、minChars及queryParam，并定义store加载远程数据，可以实现在用户输入字符时触发查询并展示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现：extjs3 中combobox自身带这个功能即在remote模式下，store在load的时候会将用户输入作为参数传递到后台。

需要设置的属性：

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

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

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

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

store的定义：（这里的method 设置为 post ,如果是get方式的话，输入中文的话后台需要url转码）

  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();
            }
        }
    },

combobox的定义：

var search = new Ext.form.ComboBox({
      mode : 'remote',//远程数据
     // typeAhead : true,
    //  typeAheadDelay:300,
      triggerAction: 'all',
      minChars:2,
      store : ds,
      editable:true,
      queryParam: 'userinput',
    //  autoLoad:true,
     // lastQuery:'',
     // loadingText : 'Searching...',
      width : 300,     
      //editable:true,
      //lastQuery: '',
      hideTrigger: true,
      //typeAheadDelay: 100,
      displayField : 'SHOWNAME',
	  valueField : 'VALUE',  
	  fieldLabel : '类型',
	  
	  listeners:{
                    beforequery:function(qe){
                        var para  =  qe.query ;    // 
                    }
              }
     });

转载于:https://www.cnblogs.com/igoogleyou/p/comboboxextjs.html