Ext中的combobox有属性typeAhead:true 能够实现模糊匹配,可是是从开始匹配的,若是须要自定的的匹配,则须要监听beforequery方法,实现本身的匹配查询方法:html
var gfxmComb = new Ext.form.ComboBox({ id : 'gfxmComb', store : gfxmStore, typeAhead : true, mode : 'local', editable : true, displayField :'xmMc', valueField :'xmBm', triggerAction : 'all', selectOnFocus : true, listeners : { 'beforequery':function(e){ var combo = e.combo; if(!e.forceAll){ var input = e.query; // 检索的正则 var regExp = new RegExp(".*" + input + ".*"); // 执行检索 combo.store.filterBy(function(record,id){ // 获得每一个record的项目名称值 var text = record.get(combo.displayField); return regExp.test(text); }); combo.expand(); return false; } } } });
var employee_store = new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:"../Process/Form_cli_e.ashx"}), reader: new Ext.data.JsonReader({ //remote:true, totalProperty:'totalProperty', root:'root', id:'employee_store' },[ {name: 'ry_name'}, {name: 'ry_gh'} ]) }); function cli_e(){ var cli_e_box = new Ext.form.ComboBox({ mode:'remote', idname:'cli_E', name:'cli_E', displayField:'ry_name', valueField:'ry_gh', store:employee_store, typeAhead:false, triggerAction:'query' }); return cli_e_box; }
1.使用simplestore正常 ;
2.使用远程数据,设置triggerAction:’all’,正常 ;
3.使用远程数据,设置triggerAction:’query’,读不出数据 ;
4.使用远程数据,设置triggerAction:’query’,在combobox中输入4个字符可加载到数据,但没有筛选功能 ;markdown
Ext.form.ComboBox级联菜单(mode : ‘local[remote]’)url
var dwStore = new Ext.data.JsonStore({ url:"bdzJbqk.html?m=loaddwdata", root:"dwresults", totalProperty:"dwtotalCount", fields:["id","name"] }); dwStore.load(); var bdzStore = new Ext.data.JsonStore({ url:"bdzJbqk.html?m=loadbdzdata", root:"bdzresults", totalProperty:"dwtotalCount", fields:["id","name"] }); var bdzcombo = new Ext.form.ComboBox({ id:'bdz', width:60, listWidth:58, store: bdzStore, value: "所有", valueField :"id", displayField: "name", forceSelection: true, editable: false, triggerAction: 'all', //mode : 'local', allowBlank:true }); var dwcombo = new Ext.form.ComboBox({ width:150, id:'search', store: dwStore, value: '${cdssdw}', valueField :"id", displayField: "name", forceSelection: true, hiddenName:'test', editable: false, triggerAction: 'all', allowBlank:true, emptyText:'请选择', fieldLabel: '多选下拉ComBo', mode : 'remote', listeners:{ select :function(dwcombo){ bdzStore.load({params:{cdssdw: dwcombo.getValue()}}); } } });