• Extjs combobox 实现搜索框的效果


    目的:使用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 ;    // 
                        }
                  }
         });
    

      

  • 相关阅读:
    自相关函数 互相关函数 平稳随机过程
    MC323发短信程序+MSP430F149
    labview notes
    DSSS FHSS
    dBm与功率(w)换算关系!
    int 正负相乘
    51单片机 1602液晶显示
    51单片机 AD转换
    51单片机 蜂鸣器
    51单片机 串口通信
  • 原文地址:https://www.cnblogs.com/igoogleyou/p/comboboxextjs.html
Copyright © 2020-2023  润新知