ExtJS ComboBox Implementation of the search box effect

Purpose: Use the ComboBox to achieve a similar search box effect, that is, after the user enters the content, appears the related following list, provides the choice.

Implementation: EXTJS3 in the ComboBox itself with this function.

Properties that need to be set:

1. Hidetrigger:true,//Remove the small logo on the right

2. Mode: ' Remote ',//data needs to be downloaded remotely

3. Minchars:2,//Set the query to be triggered when the user input character number

4. Queryparam: ' Userinput ',//Set the name of the user pass parameter, default is ' query '

Definition of 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 '          }])  });

When the user enters 2 characters, the store is loaded, the background is called, and the user input can be obtained in the background. ("Userinput"), in the background processing when the user input parameters, to get the desired store content.

You can add the Beforquery function to see

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

Chrome Break Point debugging

Found in the source code:

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 Enter content for user this.store.load ({params:this.getParams (q)//load store here                });                This.expand ();                }}else{This.selectedindex =-1;            This.onload (); }        }    },

　　

ExtJS ComboBox Implementation of the search box effect