Combobox 列表过滤

最新推荐文章于 2024-11-14 10:20:59 发布

原创最新推荐文章于 2024-11-14 10:20:59 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

Extjs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个自定义的ComboBox组件，该组件可以根据是否显示活跃状态来动态过滤显示的产品列表。通过扩展Ext.form.ComboBox类并增加一个名为active的参数，实现了根据当前设置过滤下拉列表中的项目。

在日常需求中，可能会遇到，同一个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参数作为数组，这样就可以自由定义哪个栏位进行过滤了。

在此就不详述了。