Ext. UX. Form. searchfield usage

I have been working on a management system this semester, and extjs is used at the front end. Now I will summarize my learning experience for this semester. First, we will start from ext. UX. form. searchfield started to talk about it because it had been bothering me for a long time and I had not solved it until the end of the project a few days ago.

First, we will attach the text of Ext. UX. Form. searchfieldSource code:

/*! <Br/> * ext JS library 3.2.0 <br/> * copyright (c) 2006-2010 ext JS, Inc. <br/> * licensing@extjs.com <br/> * http://www.extjs.com/license <br/> */<br/> Ext. NS ('ext. UX. form '); <br/> Ext. UX. form. searchfield = ext. extend (ext. form. twintriggerfield, {<br/> initcomponent: function () {<br/> Ext. UX. form. searchfield. superclass. initcomponent. call (this); <br/> This. on ('specialkey', function (F, E) {<br/> If (E. getkey () = E. enter) {<br/> This. ontrigger2click (); <br/>}< br/>}, this); <br/>}, <br/> validationevent: false, <br/> validateonblur: false, <br/> trigger1class: 'x-form-clear-trigger', <br/> trigger2class: 'x-form-search-trigger', <br/> hidetrigger1: True, <br/> width: 180, <br/> hassearch: false, <br/> paramname: 'query', <br/> ontrigger1click: function () {<br/> If (this. hassearch) {<br/> This. el. dom. value = ''; <br/> var o = {start: 0}; <br/> This. store. baseparams = This. store. baseparams | |{}; <br/> This. store. baseparams [this. paramname] = ''; <br/> // This. store. reload ({Params: O}); <br/> This. store. reload (); <br/> This. triggers [0]. hide (); <br/> This. hassearch = false; <br/>}< br/>}, <br/> ontrigger2click: function () {<br/> var v = This. getrawvalue (); <br/> If (v. length <1) {<br/> This. ontrigger1click (); <br/> return; <br/>}< br/> var o = {start: 0 }; <br/> This. store. baseparams = This. store. baseparams | |{}; <br/> This. store. baseparams [this. paramname] = V; <br/> // This. store. reload ({Params: O}); <br/> This. store. reload (); <br/> This. hassearch = true; <br/> This. triggers [0]. show (); <br/>}< br/> });

SourceCodeWe can see that I watched a line:

// This. Store. Reload ({Params: O }); 

This parameter is used for paging. In my actual project, two parameters, start and limit, are used for paging, but only start is used here. Therefore, if reload only transmits start, an error is returned, in addition, I found through tests that the reload method does not need to pass parameters, and it will automatically use the original paging parameters start and limit.

When we see this search box, we may think about how the search control transmits parameters to the background? From the source code, we can see that there is a line

Paramname: 'query ', 

When we enter a query condition in the search control, the query condition is assigned to the query. The query condition is passed through the query parameter. In the background, we can obtain the text in the search criteria using the following methods:

String query = request. getparameter ("query "); 

After obtaining the search condition, we can use this search condition to query the database.

 

Below I will attach the code for using searchfield in extjs at the front end.

First, define the toolbar as follows:

VaR toolbar = new Ext. toolbar ([{// create a gridpanel toolbar component <br/> text: 'add employee information', <br/> iconcls: 'add', <br/> handler: adduser <br/>},{ <br/> text: 'delete employee information', <br/> iconcls: 'delete', <br/> handler: deleteuser <br/>},{ <br/> text: 'modify employee information', <br/> iconcls: 'plugin', <br/> handler: updateuser <br/>}< br/>, '-', 'query: ', '', new Ext. UX. form. searchfield ({<br/> store: userstore, <br/> width: 110 <br/>}) <br/>]); <br/> 

Then use the toolbar in Grid:

VaR usergrid = new Ext. grid. gridpanel ({// create a grid table component <br/> applyto: 'user-grid-Div ', // set the actual location of the table <br/> frame: True, // render table panel <br/> tbar: toolbar, // set the top toolbar <br/> striperows: True, // display the zebra crossing <br/> autoscroll: True, // when the table width is queried, the scroll bar is displayed. <br/> store: userstore, // you can set the dataset corresponding to the table. <br/> viewconfig: {// automatically fill the table <br/> AutoFill: True <br/>}, <br/> SM: Sm, // set the table check box <br/> CM: cm, // set table columns <br/> bbar: New Ext. pagingtoolbar ({<br/> pagesize: 25, <br/> store: userstore, <br/> displayinfo: True, <br/> displaymsg: 'display {0} to {1} records, total {2} records ', <br/> emptymsg: 'No records' <br/> //, items: ['-', new Ext. app. searchfield ({store: userstore})] <br/>}) <br/> }); 

The search control does not have to be placed on the toolbar, which can be set as needed.