目的:使用combobox实现一个类似搜索框的效果,即用户输入内容后,出现相关下列列表,提供选择。
实现:extjs3 中combobox自身带这个功能。
需要设置的属性:
1. hideTrigger: true, // 去掉右侧的小标志
2. mode : ‘remote‘, // 数据需要远程下载
3. minChars:2, // 设置用户输入字符多少时触发查询
4. queryParam: ‘userinput‘, // 设置用户传递参数的名称,默认是 ‘query’
store的定义:
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();
}
}
},
原文:http://www.cnblogs.com/igoogleyou/p/comboboxextjs.html