Extjs之多选下拉框（MultiSelect）

扩展js类库，在项目中建立一个 js文件，命名为:xxx.js  其代码为：

if ('function' !== typeof RegExp.escape) {    RegExp.escape = function (s)     {        if ('string' !== typeof s)         {            return s;        }        return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');    };}Ext.ns('Ext.form');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();    }});Ext.reg('multiSelect', Ext.form.MultiSelect); 

在ext-all.css文件最后，加入css样式

.ux-MultiSelect-icon { width:16px; height:16px; float:left; background-position: -1px -1px ! important; background-repeat:no-repeat ! important; }.ux-MultiSelect-icon-checked { background: transparent url(../images/default/menu/checked.gif); }.ux-MultiSelect-icon-unchecked { background: transparent url(../images/default/menu/unchecked.gif); }

//获得部门人员名单     var DepartUserStore=new Ext.data.Store(     {            proxy: new Ext.data.HttpProxy(            {                    url:'/Web/Manage/DeskTop/JSON/ScheduleManager/GetSimpleDepartUserInfo.aspx'            }),            //读取Json            reader: new Ext.data.JsonReader(            { totalProperty: "totalCount", root: "root" },             [                    {name:'UserId',type:'int'},                    {name:'UserName',type:'string'}            ])    });        var DepartUserCbox = new Ext.form.MultiSelect(    {            fieldLabel: '    姓名',            labelStyle: 'width:80px',            width: 150,            editable: false,            id: 'DepartUserDS',            hiddenName:'DepartUserIdDS',            store: DepartUserStore,            emptyText: '--请选择--',            allowBlank: false,             blankText: '请选择',             mode:'remote',            displayField: 'UserName',            valueField: 'UserId',            triggerAction: 'all',            selectOnFocus: true,            listWidth: 200    });        DepartUserStore.on('load', function ()     {            DepartUserCbox.selectAll(); //全选    });

DepartUserStore.load();