Extjs之多选下拉框（MultiSelect）

拼搏现实的明天。 2022-08-25 11:58 352阅读 0赞

![Center][]

扩展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();

[Center]: /images/20220824/a8741ad8c41941fd8a6344671fe8bb53.png