多选下拉框Ext.form.MultiSelect（全选、反选）

首先在ext-all.js中添加MultiSelect类

Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox, {
		checkField : 'checked',
		multi : true,
		separator : ',',
		initComponent : function () {
			if (!this.tpl) {
				this.tpl = '<tpl for=".">' + '<div class="x-combo-list-item">'
					 + '<img src="' + Ext.BLANK_IMAGE_URL + '" '
					 + 'class="ux-MultiSelect-icon ux-MultiSelect-icon-'
					 + '{[values.' + this.checkField + '?"checked":"unchecked"'
					 + ']}">'
					 + '{[values.' + this.displayField + ']}'
					 + '</div>'
					 + '</tpl>';
			}
			Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments);
			this.on({
				scope : this,
				beforequery : this.onBeforeQuery,
				blur : this.onRealBlur
			});
			this.onLoad = this.onLoad.createSequence(function () {
					if (this.el) {
						var v = this.el.dom.value;
						this.el.dom.value = '';
						this.el.dom.value = v;
					}
				});
		},
		initEvents : function () {
			Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments);
			this.keyNav.tab = false;
		},
		beforeBlur : function () {},
		postBlur : function () {},
		clearValue : function () {
			this.value = '';
			this.setRawValue(this.value);
			this.store.clearFilter();
			this.store.each(function (r) {
				r.set(this.checkField, false);
			}, this);
			if (this.hiddenField) {
				this.hiddenField.value = '';
			}
			this.applyEmptyText();
		},
		getCheckedDisplay : function () {
			var re = new RegExp(this.separator, "g");
			return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
		},
		getCheckedValue : function (field) {
			field = field || this.valueField;
			var c = [];
			var snapshot = this.store.snapshot || this.store.data;
			snapshot.each(function (r) {
				if (r.get(this.checkField)) {
					c.push(r.get(field));
				}
			}, this);
			return c.join(this.separator);
		},
		onBeforeQuery : function (qe) {
			qe.query = qe.query.replace(
					new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '');
		},
		onRealBlur : function () {
			this.list.hide();
			var rv = this.getRawValue();
			var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
			var va = [];
			var snapshot = this.store.snapshot || this.store.data;
			Ext.each(rva, function (v) {
				snapshot.each(function (r) {
					if (v === r.get(this.displayField)) {
						va.push(r.get(this.valueField));
					}
				}, this);
			}, this);
			this.setValue(va.join(this.separator));
			this.store.clearFilter();
		},
		onSelect : function (record, index) {
			if (this.fireEvent('beforeselect', this, record, index) !== false) {
				record.set(this.checkField, !record.get(this.checkField));
				if (this.store.isFiltered()) {
					this.doQuery(this.allQuery);
				}
				if (this.multi) {
					if (record.get("key") == "---" && record.get(this.checkField)) {
						this.setValue("---");
					} else {
						this.setValue(this.getCheckedValue());
					}
				} else {
					this.clearValue();
					this.value = record.get(this.valueField);
					this.setRawValue(record.get(this.displayField));
					this.list.hide();
				}
				this.fireEvent('select', this, record, index);
			}
		},
		setValue : function (v) {
			if (v) {
				v = '' + v;
				if (this.valueField) {
					this.store.clearFilter();
					this.store.each(function (r) {
						var checked = !(!v.match('(^|' + this.separator + ')'
								 + RegExp.escape(r.get(this.valueField))
								 + '(' + this.separator + '|$)'));
						r.set(this.checkField, checked);
					}, this);
					this.value = this.getCheckedValue();
					this.setRawValue(this.getCheckedDisplay());
					if (this.hiddenField) {
						this.hiddenField.value = this.value;
					}
				} else {
					this.value = v;
					this.setRawValue(v);
					if (this.hiddenField) {
						this.hiddenField.value = v;
					}
				}
				if (this.el) {
					this.el.removeClass(this.emptyClass);
				}
			} else {
				this.clearValue();
			}
		},
		selectAll : function () {
			this.store.each(function (record) {
				record.set(this.checkField, true);
			}, this);
			this.doQuery(this.allQuery);
			this.setValue(this.getCheckedValue());
		},
		deselectAll : function () {
			this.clearValue();
		},
		initList : function () {
			if (!this.list) {
				var a = "x-combo-list",
				d = Ext.getDom(this.getListParent() || Ext.getBody()),
				b = parseInt(Ext.fly(d).getStyle("z-index"), 10);
				if (this.ownerCt && !b) {
					this.findParentBy(function (e) {
						b = parseInt(e.getPositionEl().getStyle("z-index"), 10);
						return !!b
					})
				}
				this.list = new Ext.Layer({
						parentEl : d,
						shadow : this.shadow,
						cls : [a, this.listClass].join(" "),
						constrain : false,
						zindex : (b || 12000) + 5
					});
				var c = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
				this.list.setSize(c, 0);
				this.list.swallowEvent("mousewheel");
				this.assetHeight = 0;
				if (this.syncFont !== false) {
					this.list.setStyle("font-size", this.el.getStyle("font-size"))
				}
				if (this.title) {
					this.header = this.list.createChild({
							cls : a + "-hd",
							html : this.title
						});
					this.assetHeight += this.header.getHeight()
				}
				this.innerList = this.list.createChild({
						cls : a + "-inner"
					});
				this.mon(this.innerList, "mouseover", this.onViewOver, this);
				this.mon(this.innerList, "mousemove", this.onViewMove, this);
				this.innerList.setWidth(c - this.list.getFrameWidth("lr"));
				if (this.pageSize) {
					this.footer = this.list.createChild({
							cls : a + "-ft"
						});
					var combo = this;
					this.pageTb = new Ext.PagingToolbar({
							store : this.store,
							pageSize : this.pageSize,
							renderTo : this.footer,
							items : ['->', {
									text : '全选',
									handler : function () {
										combo.selectAll();
									}
								}, '-', {
									text : '反选',
									handler : function () {
										combo.deselectAll();
									}
								}
							]
						});
					this.assetHeight += this.footer.getHeight()
				}
				if (!this.tpl) {
					this.tpl = '<tpl for="."><div class="' + a + '-item">{' + this.displayField + "}</div></tpl>"
				}
				this.view = new Ext.DataView({
						applyTo : this.innerList,
						tpl : this.tpl,
						singleSelect : true,
						selectedClass : this.selectedClass,
						itemSelector : this.itemSelector || "." + a + "-item",
						emptyText : this.listEmptyText,
						deferEmptyText : false
					});
				this.mon(this.view, {
					containerclick : this.onViewClick,
					click : this.onViewClick,
					scope : this
				});
				this.bindStore(this.store, true);
				if (this.resizable) {
					this.resizer = new Ext.Resizable(this.list, {
							pinned : true,
							handles : "se"
						});
					this.mon(this.resizer, "resize", function (i, e, g) {
						this.maxHeight = g - this.handleHeight - this.list.getFrameWidth("tb") - this.assetHeight;
						this.listWidth = e;
						this.innerList.setWidth(e - this.list.getFrameWidth("lr"));
						this.restrictHeight()
					}, this);
					this[this.pageSize ? "footer" : "innerList"].setStyle("margin-bottom", this.handleHeight + "px")
				}
			}
		}
	});

Ext.reg('multiSelect', Ext.form.MultiSelect);

用法与Ext.form.ComboBox相同。