基于Ext3.3的可多选下拉框

最新推荐文章于 2019-04-19 15:03:37 发布

最新推荐文章于 2019-04-19 15:03:37 发布 · 402 阅读

文章标签：

#Ext #combox #下拉框 #可选

本文介绍如何使用ExtJS框架实现一个可多选的下拉框组件，该组件支持从本地或远程数据源加载选项，并允许用户通过复选框进行多项选择。

在项目中需要可以多选的下拉框，经过研究最终得出了以下成果，特此标记

Ext.namespace("ycl.Widgets");
Wg = ycl.Widgets;
//范例
//var store = new Ext.data.ArrayStore({
//    fields: ['abbr', 'value'],
//    data : [['1','a'],['2','b'],['3','c']]
//});
//	combox = new Wg.MultiCombox({
//		store : store,
//		id : 'abbr',
//		name : 'value',
//		applyTo : 'test'
//		hiddenValue : '1,2,3'//初始化展示，选中值
//	});
//	combox.init(true);
//	alert(combox.getComboxValue());
//  <input type="text" id="test" size="20"/>
Wg.MultiCombox = function(_cfg) {
	Ext.apply(this, _cfg);
};
Ext.apply(
Wg.MultiCombox.prototype,
{
	init : function(_select) {//_select是否需要选择框
		var obj = this;
		var store = '';
		if(!obj.store){
			//如果store为空，创建后台store
			if(obj.url){
				Wg.alert('错误','缺少数据源');
				return;
			}
			url = obj.url;
			var index = [{name : 'name'}, {name : 'value'}];
			store = new Ext.data.JsonStore({
				autoLoad : true,
	            fields: index,
	            url : this.url//this.responseJson(response, list, false);
			},[]);
		}else
			store = obj.store;
		name = Ext.isEmpty(obj.name)?'name':obj.name;
		id = Ext.isEmpty(obj.id)?'value':obj.id;
		if(!obj.applyTo){
			Wg.alert('错误','下拉框缺少指向');
			return;
		}
		var applyTo = obj.applyTo;
		var tpl = '';
		if(_select){
			tpl = '<tpl for="."><div class="x-combo-list-item"><span><input type="checkbox" {[values.check?"checked":""]} value="{[values.'+id+']}"/></span><span>{'+name+'}</span></div></tpl>';
		}
		this.multiCombox = new Ext.form.ComboBox(
				{
					store : store,
					displayField : name,
					valueField : id,
					typeAhead : true,
					mode : 'local',
					triggerAction : 'all',
					selectOnFocus : true,
					emptyText:'请选择',
					applyTo : applyTo,
					editable : false,
					resizable : true,
					tpl : tpl,
					shadow : 'drop',
					onSelect : function(record, index) {
						if (this.fireEvent('beforeselect',
								this, record, index) !== false) {
							var strkey = [];
							var strvalue = [];
							if(_select){
								record.set('check', !record
										.get('check'));
								this.store.each(function(rc) {
									if (rc.get('check')) {
										strkey.push(rc.get(id));
										strvalue.push(rc.get(name));
									}
								});
							}else{
								strkey.push(record.get(id));
								strvalue.push(record.get(name));
							}
//							this.setValue(strkey.join());
							obj.hiddenValue = strkey.join();
//							this.value = strvalue.join();
							Ext.getDom(applyTo).value = strvalue.join();
							this.fireEvent('select', this,
									record, index);
						}
					},
					listeners : {"expand" : function(){//在展开时根据默认值选中项
						if(obj.hiddenValue){
							hiddenValue = obj.hiddenValue.split(',');
							store.each(function(rc) {
								for(var i=0;i<hiddenValue.length;i++){
									var eares = hiddenValue[i];
									if (rc.get(id) == eares) {
										rc.set('check', true);
									}
								}
							});
						}
					}}
				});
		if(obj.hiddenValue){//初始化默认展示值
			hiddenValue = obj.hiddenValue.split(',');
			var strvalue = [];
			store.each(function(rc) {
				for(var i=0;i<hiddenValue.length;i++){
					var eares = hiddenValue[i];
					if (rc.get(id) == eares) {
						strvalue.push(rc.get(name));
					}
				}
			});
			Ext.getDom(applyTo).value = strvalue.join();
		}
	},
	getComboxValue : function() {
		return this.hiddenValue;
	}
});
Ext.QuickTips.init();