Extjs combobox 实现搜索框的效果
目的:使用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 ; // } } });