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

素颜马尾好姑娘i 2022-07-26 05:13 309阅读 0赞

首先在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相同。