Combobox 列表过滤

在日常需求中，可能会遇到，同一个Combobox组件，多种的显示情况。

 

比如可能根据其中的某些栏位，下拉列表中的值有所区别。

 

目前碰到一个需求，需要显示活跃的产品，另外一处显示全部产品。

 

为了增加可用性，决定重写Combobox类，增加参数开关，可以随意设定。

 

实现方法：

Modules.PorudctListCombo = Ext.extend(Ext.form.ComboBox, {
	active : false, //新增的参数
	store : ProductStore,
	fieldLabel :'ttttt',
	displayField : 'label',
	valueField : 'code',
	triggerAction : 'all',
	forceSelection : true,
	selectOnFocus : true,
	typeAhead : true,
	mode : 'local',
	lastQuery: '',
	 initComponent : function(){ //重写此方法
		 if(this.active){
			 var records = [];
			 this.store.each(function(r){
			 	records.push(r.copy());
			 });
			 var clonestore = new Ext.data.Store({
			 	recordType: this.store.recordType
			 });
			 clonestore.add(records);
		         clonestore.clearFilter();
			 clonestore.filterBy(function(r){ //进行值的过滤
				 return r.get('start') <= new Date() && r.get('status')=='ACTIVE';
			 });
			this.store =clonestore; //值赋给combobox
		 }
		 Modules.ProductListCombo.superclass.initComponent.call(this);
    }  
});

 

使用的时候，只要设定active true or false即可。

 

或者，active参数作为数组，这样就可以自由定义哪个栏位进行过滤了。

 

在此就不详述了。