這學(xué)期一直在做一個(gè)管理系統(tǒng)，前臺(tái)用到了ExtJs，現(xiàn)在開始總結(jié)這一學(xué)期的學(xué)習(xí)心得，首先我們從Ext.ux.form.SearchField開始講，因?yàn)檫@個(gè)東西一直困擾我好長(zhǎng)時(shí)間，直到項(xiàng)目結(jié)束前幾天我才解決這個(gè)問題。

首先我們先附上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});

這個(gè)參數(shù)是用于分頁的，我實(shí)際的項(xiàng)目中，分頁用到了2個(gè)參數(shù)，分別是start和limit，但是這里只有start，因此如果reload只傳start會(huì)報(bào)錯(cuò)，而且我通過測(cè)試發(fā)現(xiàn)，reload方法不需要傳遞參數(shù)，他它自動(dòng)會(huì)使用原來的分頁參數(shù)start和limit。

看到這個(gè)搜索框，我們一般可能會(huì)想，這個(gè)搜索控件是如何給后臺(tái)傳遞參數(shù)的呢？從源代碼中我們看到有一行

paramName : 'query',

當(dāng)我們?cè)谒阉骺丶休斎氩樵儣l件，這個(gè)查詢條件會(huì)賦值給query，查詢條件就是通過這個(gè)參數(shù)名為query來傳遞的。我們?cè)诤笈_(tái)可以通過以下方式獲取搜索條件中的文本：

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

得到搜索條件以后我們就可以使用這個(gè)搜索條件查詢數(shù)據(jù)庫了。

下面我附上前臺(tái)的ExtJs中使用SearchField的代碼。

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

var toolbar = new Ext.Toolbar( [ {// 創(chuàng)建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( {// 創(chuàng)建Grid表格組件

applyTo : 'user-grid-div',// 設(shè)置表格現(xiàn)實(shí)位置

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

tbar : toolbar,// 設(shè)置頂端工具欄

stripeRows : true,// 顯示斑馬線

autoScroll : true,// 當(dāng)數(shù)據(jù)查過表格寬度時(shí)，顯示滾動(dòng)條

store : userStore,// 設(shè)置表格對(duì)應(yīng)的數(shù)據(jù)集

viewConfig : {// 自動(dòng)充滿表格

autoFill : true

},

sm : sm,// 設(shè)置表格復(fù)選框

cm : cm,// 設(shè)置表格的列

bbar : new Ext.PagingToolbar( {

pageSize : 25,

store : userStore,

displayInfo : true,

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

emptyMsg : '沒有記錄'

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

})

});

搜索控件不一定非要放在toolbar上，這個(gè)可以根據(jù)個(gè)人需要設(shè)定。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。