EXTJS提供的COMBOX有一个自动完成的功能 ,就是你只要输入头几个字,那么以这几个字开头的所有列表项都会显示出来供你选。但是有一个缺陷,就是COMBOX只会按照头几个字严格去匹配, 而如果想模糊查询,就不行了。
比如,我有一个保存了所有客户公司名称的COMBOX,我记不得某个公司的全名,但我知道这个公司大概叫“百邦”,那么我只要在COMBOX中输入“百邦”,即可查出所有包含“百邦”的公司。实现代码如下。
//combox用到的store
comboxVendorStore=new Ext.data.JsonStore({
url:'/pcms/dictionary/vendor.do?method=find',
root:'Datas',
totalProperty: 'TotalRecords',
fields:[
{name:'vendorId', mapping:'vendorId'},
{name:'shortName', mapping:'shortName'}
]
});
var PagevendorCombox=new Ext.form.ComboBox({
name:'vendorId',
fieldLabel:'供货单位',
store: comboxVendorStore,
displayField:'shortName',
valueField:'vendorId',
emptyText:'请选择',
width:160,
listWidth:400,
minHeight:100,
editable:true,
allowBlank:false,
mode:'local',
loadingText:'loading...',
hiddenName:'vendorId',
selectOnFocus: true,
triggerAction:'all',
enableKeyEvents:true,
listeners:{
keypress:function(t,e){
//这里判断空格,即输入“百邦”后,敲击空格键才进行查询,防止无条件的查询拖累服务器。
if(e.getKey()==e.SPACE){
comboxVendorStore.load({params:{query:PagevendorCombox.getEl().getValue(),start:0,limit:100000}});//这里取Combox内容的方法需要注意,是用HTML元素的方式去取。取后通过query传递给后台,这个query参数里放的就是“百邦”两字,后台根据此进行模糊查询并返回相应的结果。
}
}
}
});
comboxVendorStore.load({params:{start:0,limit:100000}});