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 ;    // 
                    }
              }
     });