ExtJs LovCombo 拓展列表增加全选|反选按钮

最新推荐文章于 2025-07-10 14:17:34 发布

sword_happy

最新推荐文章于 2025-07-10 14:17:34 发布

阅读量1.2k

点赞数

分类专栏： extjs 文章标签： lovcombo 全选

extjs 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在ExtJS的LovCombo组件中添加全选和反选功能，通过自定义CSS样式及调整JavaScript代码实现增强用户体验。适用于前端开发人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ExtJs LovCombo 拓展列表增加全选|反选按钮

在Ext.ux.form.LovCombo.js中修改


    initList: function () {
        if (!this.list) {
            var cls = 'x-combo-list';

            this.list = new Ext.Layer({
                parentEl: this.getListParent(),
                shadow: this.shadow,
                cls: [cls, this.listClass].join(' '),
                constrain: false
            });

            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setSize(lw, 0);
            this.list.swallowEvent('mousewheel');
            this.assetHeight = 0;
            if (this.syncFont !== false) {
                this.list.setStyle('font-size', this.el.getStyle('font-size'));
            }
            if (this.title) {
                this.header = this.list.createChild({
                    cls: cls + '-hd',
                    html: this.title
                });
                this.assetHeight += this.header.getHeight();
            }

            if (this.showSelectAll) {
                this.selectall = this.list.createChild({
                    cls: cls + 'item ux-combo-selectall-icon-unchecked ux-combo-selectall-icon',
                    html: "选择全部"
                });
                this.selectall.on("click", function (el) {
                    if (this.selectall.hasClass("ux-combo-selectall-icon-checked")) {
                        this.selectall.replaceClass("ux-combo-selectall-icon-checked", "ux-combo-selectall-icon-unchecked");
                        this.deselectAll();
                    } else {
                        this.selectall.replaceClass("ux-combo-selectall-icon-unchecked", "ux-combo-selectall-icon-checked")
                        this.selectAll();
                    }
                }, this);
                this.assetHeight += this.selectall.getHeight();
            }

            this.innerList = this.list.createChild({
                cls: cls + '-inner'
            });
            this.mon(this.innerList, 'mouseover', this.onViewOver, this);
            this.mon(this.innerList, 'mousemove', this.onViewMove, this);
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));

            if (this.pageSize) {
                this.footer = this.list.createChild({
                    cls: cls + '-ft'
                });
                this.pageTb = new Ext.PagingToolbar({
                    store: this.store,
                    pageSize: this.pageSize,
                    renderTo: this.footer
                });
                this.assetHeight += this.footer.getHeight();
            }

            if (!this.tpl) {
                this.tpl = '<tpl for="."><div class="' + cls + '-item">{' + this.displayField + '}</div></tpl>';
            }

            this.view = new Ext.DataView({
                applyTo: this.innerList,
                tpl: this.tpl,
                singleSelect: true,
                selectedClass: this.selectedClass,
                itemSelector: this.itemSelector || '.' + cls + '-item',
                emptyText: this.listEmptyText
            });

            this.mon(this.view, 'click', this.onViewClick, this);

            this.bindStore(this.store, true);

            if (this.resizable) {
                this.resizer = new Ext.Resizable(this.list, {
                    pinned: true,
                    handles: 'se'
                });
                this.mon(this.resizer, 'resize', function (r, w, h) {
                    this.maxHeight = h - this.handleHeight - this.list.getFrameWidth('tb') - this.assetHeight;
                    this.listWidth = w;
                    this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
                    this.restrictHeight();
                }, this);

                this[this.pageSize ? 'footer' : 'innerList'].setStyle('margin-bottom', this.handleHeight + 'px');
            }
        }
    },
    expand: function () {
        if (this.isExpanded() || !this.hasFocus) {
            //return;
        }
        this.list.alignTo(this.wrap, this.listAlign);
        this.list.show();
        if (Ext.isGecko2) {
            this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
        }
        Ext.getDoc().on({
            scope: this,
            mousewheel: this.collapseIf,
            mousedown: this.collapseIf
        });
        this.fireEvent('expand', this);
    }

其中拓展的CSS需要自定义:

.ux-combo-selectall {
    padding: 3px;
}

.ux-combo-selectall-icon-checked {
    background: transparent url(../../../../ext/resources/images/default/menu/checked.gif);
}

.ux-combo-selectall-icon-unchecked {
    background: transparent url(../../../../ext/resources/images/default/menu/unchecked.gif);
}

.ux-combo-selectall-icon {
    text-indent: 1.8em;
    background-position: 3px 2px !important;
    background-repeat: no-repeat !important;
    height: 22px;
    line-height: 20px;
    font-size: 12px;
    font-weight: bold;
    -moz-user-select: none;
}

上面的check.gif/uncheck.gif图片的路径需要自己去修改;确保能够找到正确的图片.

在需要全选按钮的时候,在配置相中添加