ExtJs5.1多选下拉框CheckComb

标签：extjs   checkcomb   多选下拉框   

ExtJs这么多个版本了，可就是不提供多选下拉框，老外不用这个玩意吗？

5都出来这么久了，新写的项目就用5吧，把以前Extjs4.2的时搜到前人的CheckComb改巴改巴，能用了就赶紧贴上来，没有仔细测试各种情况。

Ext.define('Ext.ux.CheckCombo', {
	extend : 'Ext.form.field.ComboBox',
	alias : 'widget.checkcombo',
	multiSelect : true,
	allSelector : false,
	noData : true,
	noDataText : 'No combo data',
	addAllSelector : false,
	allSelectorHidden : false,
	enableKeyEvents : true,
	afterExpandCheck : false,
	allText : 'All',
	oldValue : '',
	listeners : {
		/* uncomment if you want to reload store on every combo expand
		 beforequery: function(qe)
		 {
		 this.store.removeAll();
		 delete qe.combo.lastQuery;
		 },
		 */
		focus : function(cpt) {
			cpt.oldValue = cpt.getValue();
		},
		keydown : function(cpt, e, eOpts) {
			var value = cpt.getRawValue(), oldValue = cpt.oldValue;

			if (value != oldValue)
				cpt.setValue('');
		}
	},
	createPicker : function() {
		var me = this, picker, menuCls = Ext.baseCSSPrefix + 'menu', opts = Ext
				.apply({
					pickerField : me,
					selectionModel : me.pickerSelectionModel,
					floating : true,
					hidden : true,
					ownerCt : me.ownerCt,
					cls : me.el.up('.' + menuCls) ? menuCls : '',
					store : me.getPickerStore(),
					displayField : me.displayField,
					preserveScrollOnRefresh : true,
					pageSize : me.pageSize,
					tpl : [
							'<tpl for=".">',
							'<div class="x-boundlist-item" role="option"><span class="x-combo-checker"> </span> {'
									+ me.displayField + '}</div>', '</tpl>']
				}, me.listConfig, me.defaultListConfig);

		picker = me.picker = Ext.create('Ext.view.BoundList', opts);
		if (me.pageSize) {
			picker.pagingToolbar.on('beforechange', me.onPageChange, me);
		}

		// We limit the height of the picker to fit in the space above
		// or below this field unless the picker has its own ideas about that.
		if (!picker.initialConfig.maxHeight) {
			picker.on({
						beforeshow : me.onBeforePickerShow,
						scope : me
					});
		}
		picker.getSelectionModel().on({
					beforeselect : me.onBeforeSelect,
					beforedeselect : me.onBeforeDeselect,
					scope : me
				});

		picker.getNavigationModel().navigateOnSpace = false;

		me.store.on('load', function(store) {
					if (store.getTotalCount() == 0) {
						me.allSelectorHidden = true;
						if (me.allSelector != false)
							me.allSelector.setStyle('display', 'none');
						if (me.noData != false)
							me.noData.setStyle('display', 'block');
					} else {
						me.allSelectorHidden = false;
						if (me.allSelector != false)
							me.allSelector.setStyle('display', 'block');
						if (me.noData != false)
							me.noData.setStyle('display', 'none');
					}
				});
		return picker;
	},
	reset : function() {
		var me = this;

		me.setValue('');
	},
	setValue : function(value) {
		this.value = value;
		if (!value) {
			if (this.allSelector != false)
				this.allSelector.removeCls('x-boundlist-selected');
			return this.callParent(arguments);
		}

		if (typeof value == 'string') {
			var me = this, records = [], vals = value.split(',');

			if (value == '') {
				if (me.allSelector != false)
					me.allSelector.removeCls('x-boundlist-selected');
			} else {
				if (vals.length == me.store.getCount() && vals.length != 0) {
					if (me.allSelector != false)
						me.allSelector.addCls('x-boundlist-selected');
					else
						me.afterExpandCheck = true;
				}
			}

			Ext.each(vals, function(val) {
						var record = me.store.getById(parseInt(val));
						if (record)
							records.push(record);
					});

			return me.setValue(records);
		} else
			return this.callParent(arguments);
	},
	getValue : function() {
		if (typeof this.value == 'object')
			return this.value.join(',');
		else
			return this.value;
	},
	getSubmitValue : function() {
		return this.getValue();
	},
	expand : function() {
		var me = this, bodyEl, picker, doc, collapseIf;

		if (me.rendered && !me.isExpanded && !me.isDestroyed) {
			bodyEl = me.bodyEl;
			picker = me.getPicker();
			doc = Ext.getDoc();
			collapseIf = me.collapseIf;
			picker.setMaxHeight(picker.initialConfig.maxHeight);

			if (me.matchFieldWidth) {
				picker.width = me.bodyEl.getWidth();
			}

			// Show the picker and set isExpanded flag. alignPicker only works if isExpanded.
			picker.show();
			me.isExpanded = true;
			me.alignPicker();
			bodyEl.addCls(me.openCls);
			if (me.noData == false)
				me.noData = picker.getEl().down('.x-boundlist-list-ct')
						.insertHtml(
								'beforeBegin',
								'<div class="x-boundlist-item" role="option">'
										+ me.noDataText + '</div>', true);
			if (me.addAllSelector == true && me.allSelector == false) {
				me.allSelector = picker
						.getEl()
						.down('.x-boundlist-list-ct')
						.insertHtml(
								'beforeBegin',
								'<div class="x-boundlist-item" role="option"><span class="x-combo-checker"> </span> '
										+ me.allText + '</div>', true);
				me.allSelector.on('click', function(e) {
							if (me.allSelector.hasCls('x-boundlist-selected')) {
								me.allSelector
										.removeCls('x-boundlist-selected');
								me.setValue('');
								me.fireEvent('select', me, []);
							} else {
								var records = [];
								me.store.each(function(record) {
											records.push(record);
										});
								me.allSelector.addCls('x-boundlist-selected');
								me.select(records);
								me.fireEvent('select', me, records);
							}
						});

				if (me.allSelectorHidden == true)
					me.allSelector.hide();
				else
					me.allSelector.show();

				if (me.afterExpandCheck == true) {
					me.allSelector.addCls('x-boundlist-selected');
					me.afterExpandCheck = false;
				}
			}
			// monitor touch and mousewheel
			me.hideListeners = doc.on({
						mousewheel : me.collapseIf,
						touchstart : me.collapseIf,
						scope : me,
						delegated : false,
						destroyable : true
					});

			Ext.on('resize', me.alignPicker, me);
			me.fireEvent('expand', me);
			me.onExpand();
		} else {
			me.fireEvent('expand', me);
			me.onExpand();
		}
	},
	alignPicker : function() {
		var me = this, picker = me.getPicker();

		me.callParent();

		if (me.addAllSelector == true) {
			var height = picker.getHeight();
			if (height >= picker.maxHeight) {
				height = parseInt(height) + 20;
				picker.setHeight(height);
				picker.getEl().setStyle('height', height + 'px');
			}
		}
	},
	onListSelectionChange : function(list, selectedRecords) {
		var me = this, isMulti = me.multiSelect, hasRecords = selectedRecords.length > 0;
		// Only react to selection if it is not called from setValue, and if our list is
		// expanded (ignores changes to the selection model triggered elsewhere)
		if (!me.ignoreSelection && me.isExpanded) {
			if (!isMulti) {
				Ext.defer(me.collapse, 1, me);
			}
			/*
			 * Only set the value here if we're in multi selection mode or we have
			 * a selection. Otherwise setValue will be called with an empty value
			 * which will cause the change event to fire twice.
			 */
			if (isMulti || hasRecords) {
				me.setValue(selectedRecords, false);
			}
			if (hasRecords) {
				me.fireEvent('select', me, selectedRecords);
			}
			me.inputEl.focus();

			if (me.addAllSelector == true && me.allSelector != false) {
				if (selectedRecords.length == me.store.getTotalCount())
					me.allSelector.addCls('x-boundlist-selected');
				else
					me.allSelector.removeCls('x-boundlist-selected');
			}
		}
	}
});

还有相关的css啊，图片就自己找吧，我是把4里面的图片copy过来的:

/*ext多选下拉框样式，未选*/
.x-combo-checker {
	background-position: 50% -2px;
	margin-left: 1px;
	background-color: transparent;
	background-image:url(../thirdjs/extjs510/packages/ext-theme-gray/resources/images/grid/unchecked.gif);
	background-position: -1px -1px;
	background-repeat: no-repeat;
	height: 14px;
	width: 14px;
	display: inline-block;
}

/*ext多选下拉框样式，已选*/
.x-boundlist-selected .x-combo-checker {
	background-image:url(../thirdjs/extjs510/packages/ext-theme-gray/resources/images/grid/checked.gif);
}

ExtJs5.1多选下拉框CheckComb

标签：extjs   checkcomb   多选下拉框   

原文地址：http://blog.csdn.net/yishengreai/article/details/47319723