扩展extjs combobox多选

// add RegExp.escape if it has not been already added
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.ux');
Ext.ux.MultiComBox = Ext.extend(Ext.form.ComboBox, {
    splitSign : ',',
    selections : [],
    checks : [],
    hiddenValue : '',
    lastSelectionText : '',
    initList : function() {
        var cls = 'x-combo-list';
        this.tpl = '<tpl for="."><div class="'
            + cls
            + '-item"><table border="0" width=80% height="16px" style="height:16px;"><tr ><td class="check-box" style="width:18px;height:16px;"></td><td style="font-size:12px;">{'
            + this.displayField + '}</td></tr></table></div></tpl>';
        Ext.ux.MultiComBox.superclass.initList.call(this);
        this.view.updateIndexes = this.updateIndexes.createDelegate(this.view);
        this.view.refresh = this.refresh.createDelegate(this.view, [this], 0);
        if (this.view.store) {
            this.view.setStore(this.view.store, true);
        }
    },
    refresh : function(multi) {
        this.clearSelections(false, true);
        this.el.update("");
        var records = this.store.getRange();
        if (records.length < 1) {
            if (!this.deferEmptyText || this.hasSkippedEmptyText) {
                this.el.update(this.emptyText);
            }
            this.hasSkippedEmptyText = true;
            this.all.clear();
            return;
        }
        this.tpl.overwrite(this.el, this.collectData(records, 0));
        this.all.fill(Ext.query(this.itemSelector, this.el.dom));
        multi.createCheck();
        this.updateIndexes(0);
    },
    updateIndexes : function(startIndex, endIndex) {
        var ns = this.all.elements;
        startIndex = startIndex || 0;
        endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
        for (var i = startIndex; i <= endIndex; i++) {
            ns[i].viewIndex = i;
            if (ns[i].checkbox) {
                ns[i].checkbox.index = i;
            }
        }
    },
    createCheck : function() {
        this.checks = [];
        for (var i = 0; i < this.view.all.elements.length; i++) {
            var el = this.view.all.elements[i];
            var check = new Ext.form.Checkbox({
                width : 20,
                renderTo : Ext.getBody()
            });
            check.initCheckEvents = Ext.emptyFn();
            var m = {
                index : el.viewIndex,
                check : check,
                node : el
            };
            el.checkbox = m;
            this.checks.push(m);
            Ext.fly(el).select('.check-box').insertFirst(check.wrap);
        }
    },
    findCheckBox : function(index) {
        for (var i = 0; i < this.checks.length; i++) {
            if (this.checks[i].index == index)
                return this.checks[i];
        }
        return null;
    },
    onSelect : function(record, index, checked) {
        if (this.fireEvent('beforeselect', this, record, index) !== false) {
            if (!record)
                return;
            var checkObj = this.findCheckBox(index);
            var checkbox = checkObj && checkObj.check;
            if (!checkbox)
                return;
            if (checked == undefined)
                checked = checkbox.checked;
            this.toggleCheckBox(index, checked, record, checkbox);
            this.select(index, false);// 用来设定选择样式
            this.fireEvent('select', this, record, index);
        }
    },
    toggleCheckBox : function(index, checked, r, item) {
        if (checked == false) {
            item.setValue(1);
            if (this.isExist(index) == true)
                return;
            this.selections.push({
                record : r,
                index : index
            });
        } else {
            item.setValue(0);
            for (var i = 0; i < this.selections.length; i++) {
                if (index == this.selections[i].index)
                    this.selections.remove(this.selections[i]);
            }
        }
        this.setValue(r.data[this.valueField || this.displayField], checked);
    },

    isExist : function(index) {
        for (var i = 0; i < this.selections.length; i++) {
            if (this.selections[i].index == index)
                return true;
        }
        return false;
    },

    setValue : function(v, checked) {
        var text = this.lastSelectionText;
        var hiddenValue = this.hiddenValue;
        var values = v.toString().split(this.splitSign);
        for (i = 0, l = values.length; i < l; i++) {
            var r = this.findRecord(this.valueField, values[i]);
            if (r) {
                var name = r.data[this.displayField], value = r.data[this.valueField];
                var split = Ext.escapeRe(this.splitSign);
                var con = Ext.escapeRe(name.toString()), val = Ext
                    .escapeRe(value.toString());
                var nemeRe = new RegExp("(^" + con + "[" + split + "]?" + ")"
                    + "|([" + split + "]?" + con + ")", 'g');
                var valueRe = new RegExp("(^" + val + "[" + split + "]?" + ")"
                    + "|([" + split + "]?" + val + ")", 'g');

                if (checked == false || typeof checked == "undefined") {
                    text = text.replace(nemeRe, "");
                    hiddenValue = hiddenValue.replace(valueRe, "");
                    var separate = !text ? "" : this.splitSign;
                    text = text + separate + name;
                    hiddenValue = hiddenValue + separate + value;
                } else {
                    text = text.replace(nemeRe, "");
                    hiddenValue = hiddenValue.replace(valueRe, "");
                }
            }
        }
        this.lastSelectionText = text;
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.hiddenValue = hiddenValue || this.hiddenValue;

        if (this.hiddenField) {
            this.hiddenField.value = this.hiddenValue;
        }
        this.value = this.hiddenValue;

    },

    getValue : function() {
        return Ext.ux.MultiComBox.superclass.getValue.call(this);
    },

    selectByValue : function(v, scrollIntoView) {
        var value = this.getRawValue().trim() || "";
        var v1 = value.trim().split(this.splitSign);
        for (var i = 0; i < v1.length; i++) {
            var v = v1[i];
            if (v) {
                var r = this.findRecord(this.displayField, v);
                this.onSelect(r, this.store.indexOf(r), false);
            }
        }
    },
    getRawValue : function(flag) {
        var v = this.rendered ? this.el.getValue() : Ext.value(this.value, '');
        if (v === this.emptyText) {
            v = '';
        }
        if (flag != true)
            return v;
        var v1 = v.trim().split(this.splitSign);
        if (v1.length > 0) {
            var v2 = "";
            for (var i = 0; i < v1.length; i++) {
                if (v1[i])
                    v2 = v2 + "(" + v1[i] + ")" + "|";
            }
            if (v2.length - 2 > 0)
                v2 = v2.substring(0, v2.length - 1);
            v = new RegExp(v2);
            v.length = v2.length;
        }
        return v;
    },

    onLoad : function() {
        if (!this.hasFocus) {
            return;
        }
        if (this.store.getCount() > 0) {
            this.expand();
            this.restrictHeight();
            if (this.lastQuery == this.allQuery) {
                if (this.editable)
                    this.el.dom.select();
                this.selectByValue(this.value, true);
            } else {
                this.selectByValue(this.value, true)
            }
        } else {
            this.onEmptyResults();
        }
    },
    initQuery : function() {
        this.doQuery(this.getRawValue(true));
    },
    onTriggerClick : function() {
        if (this.disabled) {
            return;
        }
        if (this.isExpanded()) {
            this.collapse();
            this.el.focus();
        } else {
            this.onFocus({});
            if (this.triggerAction == 'all') {
                this.doQuery(this.allQuery, true);
            } else {
                this.doQuery(this.getRawValue(true));
            }
            this.el.focus();
        }
    }

});
Ext.reg('multiCombox', Ext.ux.MultiComBox);