现在的位置: 首页 > 脚本开发经验 > 正文

脚本开发——ExtJ ComboBox实现模糊匹配过滤功能

2015年02月10日 脚本开发经验 ⁄ 共 1171字 ⁄ 字号 评论关闭
ComboBox的下拉项目过多时,选择一个项目变得很困难,给ComboBox添加模糊匹配的功能变得很有必要,方便用户的选择,增强用户体验。从Ext2.0开始Ext.form.ComboBox有个typeAhead的属性可以使combobox在用户输入的同时根据已绑定的数据中弹出一些提示,但是这些提示并不具备模糊过滤的功能,比如绑定的数据中有个叫“你好”,当输入“你”的时候可以出现“你好”提示。
 
下面介绍如何实现ComboBox模糊匹配过滤功能:
1、设置triggerAction属性值为all:triggerAction : 'all';
2、设置typeAhead属性值为true :typeAhead : true;
3、设置autocomplete属性值为true :autocomplete : true;
4、设置mode属性为local :mode : 'local',这点非常重要,如果mode的属性值为remote,则autocomplete和triggerAction将不起作用,不能实现模糊匹配功能,因为模糊匹配只对本地的数据有用,对远程的数据没用;
5、设置监听器,实现监听事件blur,在这里实现数据加载,把远程数据变为本地数据;
6、手动执行load()方法一次。
 
效果图:
代码如下:
	var enginePnStore = new Ext.data.Store({
		proxy : new Ext.data.HttpProxy({
					url : 'llp.ered?reqCode=queryEnginePn'
				}),
		reader : new Ext.data.JsonReader({}, [{
							name : 'value'
						}, {
							name : 'text'
						}])
	});

	var enginePnCombo = new Ext.form.ComboBox({
		hiddenName : 'pn',
		fieldLabel : '发动机件号',
		emptyText : '请选择...',
		triggerAction : 'all',
		store : enginePnStore,
		autocomplete : true,
		displayField : 'text',
		valueField : 'value',
		loadingText : '正在加载数据...',
		mode : 'local', // 数据会自动读取,如果设置为local又调用了store.load()则会读取2次;也可以将其设置为local,然后通过store.load()方法来读取
		forceSelection : true,
		typeAhead : true,
		resizable : true,
		editable : true,
		anchor : '95%',
		listeners:{
			blur : function(e){
            	enginePnStore.load();
            }
		}
	});
	enginePnStore.load();
 

 

抱歉!评论已关闭.

×