发布时间 : 星期三 文章Ext combobox 动态模糊级联匹配更新完毕开始阅读6f6c58aebceb19e8b8f6bae6
Ext combobox 动态模糊级联匹配
Ext中的combobox有属性typeAhead：true 可以实现模糊匹配，但是是从开始匹配的，如果需要自定的的匹配，则需要监听beforequery方法，实现自己的匹配查询方法：
实现功能：有公司名和网点名两个下拉框，选择公司名的时候，要在网点名下拉框里加载对应公司所属的网点；另外要在公司名下拉框实现类似百度查询的模糊动态匹配，输入部分公司名，即可在下拉框出现包含这部分公司名的对应全部公司。公司信息在打开网页的时候通过Servlet自动加载。 代码如下：
Js代码
var CompanyStore = new Ext.data.Store({
autoLoad : true, //页面加载的时候自动加载数据 proxy: new Ext.data.HttpProxy({ url:'../CompanyComboBox', method:'post' }),
reader: new Ext.data.JsonReader({ root: 'root' }, [ {
name: 'id' } ]) });
var CompanyName = new Ext.form.ComboBox({ id : 'CompanyName', store : CompanyStore, typeAhead : true, mode : 'local', editable : true, displayField :'id', valueField :'id',
triggerAction : 'all', fieldLabel: '公司*', anchor: '95%',
selectOnFocus : true, listeners : {
'beforequery':function(e){
var combo = e.combo; if(!e.forceAll){
var input = e.query; // 检索的正则
var regExp = new RegExp(\ // 执行检索
combo.store.filterBy(function(record,id){ // 得到每个record的项目名称值
var text = record.get(combo.displayField); return regExp.test(text); });
combo.expand(); return false; } },
select:function(CompanyName, record,index){
StationName.clearValue(); // 清空第二个下拉的下拉列表值
StationStore.proxy=new Ext.data.HttpProxy({
url:'../StationComboBox?CompanyName='+CompanyName.getValue() });
StationStore.load();
} } });
var StationStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({
url:'../StationComboBox?CompanyName='+CompanyName.getValue(), method:'post' }),
reader: new Ext.data.JsonReader({ root: 'root' }, [ {
name: 'id' } ])
}); //网点
var StationName = new Ext.form.ComboBox({ xtype: 'combo', editable :false,
loadingText :'正在加载数据,请稍后... ', name: 'StationName', store : StationStore, model : 'local', displayField :'id', valueField : 'id',
triggerAction: 'all',// 触发后显示方式 // allowBlank : false, fieldLabel: '网点*',
blankText : '请选择网点',
forceSelection:true,//必须选择一项 anchor: '95%' });