A simple ExtJS search suggestion Box

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.