EXT 项目下拉列表多选框 使用示例 含源代码

if ("function" !== typeof RegExp.escape) { RegExp.escape = function(a) { if ("string" !== typeof a) { return a } return a.replace(/([.*+?^=!:${}()|[\]\/\\])/g, "\\$1") } } Ext.ns("Ext.ux.form"); Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, { selectAllOn : null, checkField : "checked", separator : ",", displaySeparator : ",", initComponent : function() { if (!this.tpl) { this.tpl = '<tpl for="."><div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="ux-lovcombo-icon ux-lovcombo-icon-{[values.' + this.checkField + '?"checked":"unchecked"]}"><div class="ux-lovcombo-item-text">{' + (this.displayField || "text") + "}</div></div></tpl>" } Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments); this.on({ scope : this, beforequery : this.onBeforeQuery }); this.onLoad = this.onLoad.createSequence(function() { if (this.el) { var a = this.el.dom.value; this.el.dom.value = ""; this.el.dom.value = a } }) }, initEvents : function() { Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments); this.keyNav.tab = false }, clearValue : function() { this.value = ""; this.setRawValue(this.value); this.store.clearFilter(); this.store.each(function(a) { a.set(this.checkField, false) }, this); if (this.hiddenField) { this.hiddenField.value = "" } this.applyEmptyText() }, getCheckedDisplay : function() { var a = new RegExp(RegExp.escape(this.separator), "g"); return this.getCheckedValue(this.displayField).replace(a, RegExp.escape(this.displaySeparator) + " ") }, getCheckedValue : function(b) { b = b || this.valueField; var d = []; var a = this.store.snapshot || this.store.data; a.each(function(c) { if (c.get(this.checkField) && c.data[this.valueField] !== this.selectAllOn) { d.push(c.get(b)) } }, this); return d.join(this.separator) }, selectAllCheck : function() { var a = this.store.snapshot || this.store.data; var b = true; a.each(function(c) { if (c.data[this.valueField] !== this.selectAllOn && !c.get(this.checkField)) { b = false; return } }, this); return b }, onBeforeQuery : function(a) { a.query = a.query.replace(new RegExp(this.getCheckedDisplay() + "[ " + RegExp.escape(this.separator) + "]*"), "") }, beforeBlur : function() { this.list.hide(); var d = this.getRawValue(); var a = d .split(new RegExp(RegExp.escape(this.displaySeparator) + " *")); var c = []; var b = this.store.snapshot || this.store.data; Ext.each(a, function(e) { b.each(function(f) { if (e === f.get(this.displayField)) { c.push(f.get(this.valueField)) } }, this) }, this); if(c.length >0 ) this.setValue(c.join(this.separator)); else { //此分支董刚+，没有下拉信息时， 获取直接输入的信息 this.value = this.getRawValue(); } this.store.clearFilter() }, onSelect : function(a, b) { if (this.fireEvent("beforeselect", this, a, b) !== false) { a.set(this.checkField, !a.get(this.checkField)); if (this.store.isFiltered()) { this.doQuery(this.allQuery) } if (a.data[this.valueField] === this.selectAllOn) { if (a.get(this.checkField)) { this.selectAll() } else { this.deselectAll() } } else { this.setValue(this.getCheckedValue()) } this.fireEvent("select", this, a, b) } }, setValue : function(a) { if (a) { a = "" + a; if (this.valueField) { this.store.clearFilter(); this.store.each(function(c) { if (c.data[this.valueField] === this.selectAllOn && this.selectAllCheck()) { c.set(this.checkField, true) } else { if (c.data[this.valueField] === this.selectAllOn) { c.set(this.checkField, null) } else { var b = !(!a.match("(^|" + RegExp.escape(this.separator) + ")" + RegExp.escape(c .get(this.valueField)) + "(" + RegExp.escape(this.separator) + "|$)")); c.set(this.checkField, b) } } }, this); this.value = this.getCheckedValue(); this.setRawValue(this.getCheckedDisplay()); if (this.hiddenField) { this.hiddenField.value = this.value } } else { this.value = a; this.setRawValue(a); if (this.hiddenField) { this.hiddenField.value = a } } if (this.el) { this.el.removeClass(this.emptyClass) } } else { this.clearValue() } }, selectAll : function() { this.store.each(function(a) { a.set(this.checkField, true) }, this); this.doQuery(this.allQuery); this.setValue(this.getCheckedValue()) }, deselectAll : function() { this.clearValue() } }); Ext.reg("lovcombo", Ext.ux.form.LovCombo);