Ext 下拉列表模糊搜索
/** * Created by huangbaidong on 2016/9/18. * 楼盘通用Combo组件,支持模糊查询 * 使用案例: * { fieldLabel : '楼盘名称', xtype: 'residentialAreaCombo', name : 'buildingId', queryParams:{ orgId:top.loginUser.orgId } } */ Ext.define('app.component.biz.house.ResidentialAreaCombo', { extend: 'Ext.form.field.ComboBox', alias: 'widget.residentialAreaCombo', displayField: 'name', valueField: 'id', queryMode: 'local', listConfig: { maxHeight:200, itemTpl: new Ext.XTemplate('{name} ') }, constructor : function(config) { Ext.apply(config, { store: Ext.create('app.component.biz.house.ResidentialAreaStore', { queryParams : config.queryParams }) }); app.component.biz.house.ResidentialAreaCombo.superclass.constructor.call(this, config); }, listeners:{ change : function(combo, record, eOpts) { if(this.callback) { if(combo.lastSelection && combo.lastSelection.length>0) { this.callback(combo.lastSelection[0]); } } }, beforequery : function(e) { var combo = e.combo; combo.collapse();//收起 var value = combo.getValue(); if (!e.forceAll) {//如果不是通过选择,而是文本框录入 combo.store.clearFilter(); combo.store.filterBy(function(record, id) { var text = record.get(combo.displayField); // 用自己的过滤规则,如写正则式 return (text.indexOf(value) != -1); }); combo.onLoad();//不加第一次会显示不出来 combo.expand(); return false; } if(!value) { //如果文本框没值,清除过滤器 combo.store.clearFilter(); } } } });
/** * Created by huangbaidong on 2016/9/18. * 楼盘组件通用Store, */ Ext.define('app.component.biz.house.ResidentialAreaStore', { extend: 'Ext.data.Store', autoLoad : true, constructor : function(config) { Ext.apply(config, { /*data:(function(){ var array = []; Ext.each(top.productStore.getData().items, function(item) { if(item.data.orgId == config.filterParams.orgId) { array.push(item); } }) return array; })()*/ proxy: { type: 'ajax', url: '../CstResidentialArea/queryAll', reader: { type: 'json', rootProperty: 'datas', totalProperty: 'total' }, extraParams: config.filterParams } }); app.component.biz.house.ResidentialAreaStore.superclass.constructor.call(this, config); } });