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

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

Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox, { checkField : 'checked', multi : true, separator : ',', initComponent : function () { if (!this.tpl) { this.tpl = '' + '' + ' 文章图片 ' + '{[values.' + this.displayField + ']}' + '' + ''; } 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.valuehttps://www.it610.com/article/= ''; 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.valuehttps://www.it610.com/article/= ''; this.setRawValue(this.value); this.store.clearFilter(); this.store.each(function (r) { r.set(this.checkField, false); }, this); if (this.hiddenField) { this.hiddenField.valuehttps://www.it610.com/article/= ''; } 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 = https://www.it610.com/article/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 = https://www.it610.com/article/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 = '{' + this.displayField + "}" } 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);