需要引入 SearchField.js,其中代码如下:
/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.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.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.hasSearch = true;
this.triggers[0].show();
}
});
var filterRange = [["authors","作者"],["fruit_name","成果名称"],["company_name","所在单位"]];
var filterField = new Ext.ux.form.SearchField({
store:store,
onTrigger2Click : function(){
var v = this.getRawValue();
var o = {start: 0};
this.store.baseParams["filterCond"]=fruitList.getTopToolbar().findById("filterCond").getValue();
if(v.length < 1){
this.store.baseParams[this.paramName] = '';
}else{
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = v;
}
this.store.reload({params:o});
this.hasSearch = true;
this.triggers[0].show();
}
});
var filterBar = new Ext.Toolbar({
items:[{text:"删除选中成果",handler:delSelFruits},"-",
{text:"分享选中成果",handler:shareSelFruits},"-",
{text:"返回",handler:returnToCollect},"->","搜索:",
{xtype:"combo",labelSeparator:":",width:80,id:"filterCond",name:"filterCond",
store:filterRange,value:"authors",editable:false,triggerAction:"all"},
filterField
]
});
后台获取搜索条件方式如下:
String filterCond = request.getParameter("filterCond");
String query = request.getParameter("query");
获取到的值分别是:
filterCond 是 authors
query 是 王强
显示效果如下图: