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

首先我們先附上Ext.ux.form.SearchField的源代碼：

/*!

* Ext JS Library 3.2.0

* Copyright(c) 2006-2010 Ext JS, Inc.

* licensing@extjs.com

* http://www.extjs.com/license

*/

Ext.ns('Ext.ux.form');

Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {

initComponent : function(){

Ext.ux.form.SearchField.superclass.initComponent.call(this);

this.on('specialkey', function(f, e){

if(e.getKey() == e.ENTER){

this.onTrigger2Click();

}

}, this);

},

validationEvent:false,

validateOnBlur:false,

trigger1Class:'x-form-clear-trigger',

trigger2Class:'x-form-search-trigger',

hideTrigger1:true,

width:180,

hasSearch : false,

paramName : 'query',

onTrigger1Click : function(){

if(this.hasSearch){

this.el.dom.value = '';

var o = {start: 0};

this.store.baseParams = this.store.baseParams || {};

this.store.baseParams[this.paramName] = '';

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

this.store.reload();

this.triggers[0].hide();

this.hasSearch = false;

}

},

onTrigger2Click : function(){

var v = this.getRawValue();

if(v.length < 1){

this.onTrigger1Click();

return;

}

var o = {start: 0};

this.store.baseParams = this.store.baseParams || {};

this.store.baseParams[this.paramName] = v;

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

this.store.reload();

this.hasSearch = true;

this.triggers[0].show();

}

});

從源代碼中我們看到我注視了一行：

// 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的工具欄組件

text : '新增員工信息',

iconCls : 'add',

handler : addUser

}, {

text : '刪除員工信息',

iconCls : 'remove',

handler : deleteUser

}, {

text : '修改員工信息',

iconCls : 'plugin',

handler : updateUser

}

, '-','查詢：',' ', new Ext.ux.form.SearchField( {

store : userStore,

width : 110

})

]);

然后在grid中使用該工具欄：

var userGrid = new Ext.grid.GridPanel( {// 創建Grid表格組件

applyTo : 'user-grid-div',// 設置表格現實位置

frame : true,// 渲染表格面板

tbar : toolbar,// 設置頂端工具欄

stripeRows : true,// 顯示斑馬線

autoScroll : true,// 當數據查過表格寬度時，顯示滾動條

store : userStore,// 設置表格對應的數據集

viewConfig : {// 自動充滿表格

autoFill : true

},

sm : sm,// 設置表格復選框

cm : cm,// 設置表格的列

bbar : new Ext.PagingToolbar( {

pageSize : 25,

store : userStore,

displayInfo : true,

displayMsg : '顯示第{0}條到{1}條記錄,一共{2}條記錄',

emptyMsg : '沒有記錄'

//,items:['-',new Ext.app.SearchField({store:userStore})]

})

});

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

總結

以上是生活随笔為你收集整理的ext中引用ux_Ext.ux.form.SearchField使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。