Extjs多選下拉框multiSelect支援reset
阿新 • • 發佈:2019-01-28
多選,增加時會記憶上一次的選中的內容,表單reset對其無效,通過此修改可使表單reset時也會跟著清空。
以下程式碼是在multiSelect.js的基礎上進行簡單修改的。
if('function' !== typeof RegExp.escape) { RegExp.escape = function(s) { if('string' !== typeof s) { return s; } // Note: if pasting from forum, precede ]/\ with backslash manually return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1'); }; // eo function escape } // create namespace Ext.ns('Ext.form'); Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox, { // {{{ // configuration options checkField : 'checked' , multi:true , separator : ',' // }}} // {{{ , initComponent : function() { // template with checkbox 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>'; } // call parent Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments); // install internal event handlers this.on( { scope : this, beforequery : this.onBeforeQuery, blur : this.onRealBlur }); // remove selection from input field this.onLoad = this.onLoad.createSequence(function() { if (this.el) { var v = this.el.dom.value; this.el.dom.value = ''; this.el.dom.value = v; } }); } // e/o function initComponent // }}} // {{{ , initEvents : function() { Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments); // disable default tab handling - does no good this.keyNav.tab = false; } // eo function initEvents // }}} // {{{ , beforeBlur : function(){ // this.assertValue(); }, postBlur : function(){ // Ext.form.ComboBox.superclass.postBlur.call(this); // this.collapse(); // this.inKeyMode = false; }, 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(); } // eo function clearValue // }}} // {{{ , getCheckedDisplay : function() { var re = new RegExp(this.separator, "g"); return this.getCheckedValue(this.displayField).replace(re, this.separator + ' '); } // eo function getCheckedDisplay // }}} // {{{ , getCheckedValue : function(field) { field = field || this.valueField; var c = []; // store may be filtered so get all records 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); } // eo function getCheckedValue // }}} // {{{ , onBeforeQuery : function(qe) { qe.query = qe.query.replace(new RegExp(RegExp.escape(this .getCheckedDisplay()) + '[ ' + this.separator + ']*'), ''); } // eo function onBeforeQuery // }}} // {{{ , 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; // iterate through raw values and records and check/uncheck items 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(); } // eo function onRealBlur // }}} // {{{ , onSelect : function(record, index) { if (this.fireEvent('beforeselect', this, record, index) !== false) { // toggle checked field record.set(this.checkField, !record.get(this.checkField)); // display full list if (this.store.isFiltered()) { this.doQuery(this.allQuery); } // set (update) value and fire event 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(); } //alert(this.value+"============================"); this.fireEvent('select', this, record, index); } } // eo function onSelect // }}} // {{{ , 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(); } } // eo function setValue // }}} // {{{ , selectAll : function() { this.store.each(function(record) { // toggle checked field record.set(this.checkField, true); }, this); // display full list this.doQuery(this.allQuery); this.setValue(this.getCheckedValue()); } // eo full selectAll // }}} // {{{ //支援reset ,reset:function(){ this.clearValue(); } , deselectAll : function() { this.clearValue(); } // eo full deselectAll // }}} }); // eo extend // register xtype Ext.reg('multiSelect', Ext.form.MultiSelect);