目的:使用combobox实现一个类似搜索框的效果,即用户输入内容后,出现相关下列列表,提供选择。
实现:extjs3 中combobox自身带这个功能即在remote模式下,store在load的时候会将用户输入作为参数传递到后台。
需要设置的属性:
1. hideTrigger: true, // 去掉右侧的小标志
2. mode : 'remote', // 数据需要远程下载
3. minChars:2, // 设置用户输入字符多少时触发查询
4. queryParam: 'userinput', // 设置用户传递参数的名称,默认是 ‘query’
store的定义: (这里的method 设置为 post ,如果是get方式的话,输入中文的话 后台需要url转码)
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : WEB_CONTEXT+'xxx.action',
method:'post'
}),
reader : new Ext.data.JsonReader({}, [{
name : 'VALUE'
}, {
name : 'TEXT'
}])
});
当用户输入2个字符时,加载store,调用后台,在后台可以取得用户输入内容。 ("userinput"),在后台处理的时候以用户输入为参数,得到想要的store内容。
可以添加 beforquery 函数看下
listeners:{
beforequery:function(qe){
var para = qe.query ;
}
}
chrome中断点调试
在源码中发现:
doQuery : function(q, forceAll){
q = Ext.isEmpty(q) ? '' : q;
var qe = {
query: q,
forceAll: forceAll,
combo: this,
cancel:false
};
if(this.fireEvent('beforequery', qe)===false || qe.cancel){
return false;
}
q = qe.query;
forceAll = qe.forceAll;
if(forceAll === true || (q.length >= this.minChars)){
if(this.lastQuery !== q){
this.lastQuery = q;
if(this.mode == 'local'){
this.selectedIndex = -1;
if(forceAll){
this.store.clearFilter();
}else{
this.store.filter(this.displayField, q);
}
this.onLoad();
}else{
this.store.baseParams[this.queryParam] = q; //q 为用户输入内容
this.store.load({
params: this.getParams(q) // 此处加载了store
});
this.expand();
}
}else{
this.selectedIndex = -1;
this.onLoad();
}
}
},
combobox的定义:
var search = new Ext.form.ComboBox({
mode : 'remote',//远程数据
// typeAhead : true,
// typeAheadDelay:300,
triggerAction: 'all',
minChars:2,
store : ds,
editable:true,
queryParam: 'userinput',
// autoLoad:true,
// lastQuery:'',
// loadingText : 'Searching...',
width : 300,
//editable:true,
//lastQuery: '',
hideTrigger: true,
//typeAheadDelay: 100,
displayField : 'SHOWNAME',
valueField : 'VALUE',
fieldLabel : '类型',
listeners:{
beforequery:function(qe){
var para = qe.query ; //
}
}
});