A simple ExtJS search suggestion Box

Encapsulated is a Ext4.2 component that inherits and is compatible with the Ext ComboBox.

The realization principle is very simple, listens to the KeyUp event in the combo.

    Search for suggested combo. Basically fully compatible, using the same way as the combo drop-down box.    Background programs are required to search for recommendations based on keyword.

The source code is as follows:

Search Suggestions box, when used, please modify the package name Ext.define ("CNC.view.SearchComboBox", {extend: "Ext.form.field.ComboBox", alias: ["Widget.search     Combo "," Widget.searchcombobox ",], Editable:true, Enablekeyevents:true, searchwordkey:" keyword ",//Search for property names        Searchsizekey: "Searchsize",//Pass number of key searchsize:5,//number returned Initcomponent:function () {//        var KeyUp = "KeyUp";    This.addlistener (KeyUp, THIS.KEYUPFN, this) this.callparent ();        }, Keyupfn:function (combo, E) {//var store = This.getstore && this.getstore ();        if (!store) {return;}        var proxy = Store.getproxy ();        if (!proxy) {return;} Gets the text content of the input var text = This.getrawvalue () | |        ""; Set to parameter inside var extraparams = Proxy.extraparams | |        {};        Proxy.extraparams = Extraparams;        var searchwordkey = This.searchwordkey;        var searchsizekey = This.searchsizekey; var searchsize = This.searchsize | | 5;        Set to parameter inside Extraparams[searchwordkey] = text;        Extraparams[searchsizekey] = searchsize;    Use Store to load store.load (); }});

Component Usage Configuration:

    {        xtype: ' Searchcombo ',        fieldlabel: ' xxxx attribute ',        name: ' Xxxxname ',        editable:true,        Displayfield: ' Xxxname ',        valuefield: ' Xxxid '        searchwordkey: ' keyword ',//Search property name        searchsizekey: ' searchsize ',// Pass the number of key        Searchsize:5,//Return the number        store:Ext.create (' XXX.xxx.xxxStore ', {            proxy: {                type: ' Ajax ', C13/>API: {                    read: ' Xxx/xxx/listby.json '                },                actionmethods: {                    read   : ' POST '                },                Reader: {                    type: ' json ',                    root: ' Data ',                    totalproperty: ' TotalCount ',                    messageproperty: ' Message '                },                extraparams: {                    xxxname: ' Xxxvalue '            }    }}}

Contoller is used in a way similar to the following:

var actype = ""; var actypename = ""; var Actypecombo = Xxxform.query (' searchcombo[name=actype] ') [0]; if (Actypecombo) {actype = Actypecombo.getvalue (); actypename = Actypecombo.getrawvalue ();}

If you want to listen for events, you should listen for the Select event:

Select (Combo, records, eopts)

Welcome message.

Description: Only remote loaded store is supported.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

A simple ExtJS search suggestion Box