Ext.ux.form.SearchField使用方法

      這學期一直在做一個管理系統，前台用到了ExtJs，現在開始總結這一學期的學習心得，首先我們從Ext.ux.form.SearchField開始講，因為這個東西一直困擾我好長時間，直到項目結束前幾天我才解決這個問題。

首先我們先附上Ext.ux.form.SearchField的原始碼：

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

從原始碼中我們看到我注視了一行：

// this.store.reload({params:o}); 

這個參數是用於分頁的，我實際的項目中，分頁用到了2個參數，分別是start和limit，但是這裡只有start，因此如果reload只傳start會報錯，而且我通過測試發現，reload方法不需要傳遞參數，他它自動會使用原來的分頁參數start和limit。

      看到這個搜尋方塊，我們一般可能會想，這個搜尋控制項是如何給後台傳遞參數的呢？從原始碼中我們看到有一行

paramName : 'query', 

當我們在搜尋控制項中輸入查詢條件，這個查詢條件會賦值給query，查詢條件就是通過這個參數名為query來傳遞的。我們在後台可以通過以下方式擷取搜尋條件中的文本：

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

得到搜尋條件以後我們就可以使用這個搜尋條件查詢資料庫了。

 

下面我附上前台的ExtJs中使用SearchField的代碼。

首先定義工具列，定義如下：

var toolbar = new Ext.Toolbar( [ {// 建立GridPanel的工具列組件<br />text : '新增員工資訊',<br />iconCls : 'add',<br />handler : addUser<br />}, {<br />text : '刪除員工資訊',<br />iconCls : 'remove',<br />handler : deleteUser<br />}, {<br />text : '修改員工資訊',<br />iconCls : 'plugin',<br />handler : updateUser<br />}<br />, '-','查詢：',' ', new Ext.ux.form.SearchField( {<br />store : userStore,<br />width : 110<br />})<br />]);<br /> 

然後在grid中使用該工具列：

var userGrid = new Ext.grid.GridPanel( {// 建立Grid表格組件<br />applyTo : 'user-grid-div',// 設定表格現實位置<br />frame : true,// 渲染表格面板<br />tbar : toolbar,// 設定頂端工具列<br />stripeRows : true,// 顯示斑馬線<br />autoScroll : true,// 當資料查過表格寬度時，顯示捲軸<br />store : userStore,// 設定表格對應的資料集<br />viewConfig : {// 自動充滿表格<br />autoFill : true<br />},<br />sm : sm,// 設定表格複選框<br />cm : cm,// 設定表格的列<br />bbar : new Ext.PagingToolbar( {<br />pageSize : 25,<br />store : userStore,<br />displayInfo : true,<br />displayMsg : '顯示第{0}條到{1}條記錄,一共{2}條記錄',<br />emptyMsg : '沒有記錄'<br />//,items:['-',new Ext.app.SearchField({store:userStore})]<br />})<br />}); 

搜尋控制項不一定非要放在toolbar上，這個可以根據個人需要設定。