ExtJs LovCombo 拓展列表 增加 全選|反選 按鈕
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圖片的路徑 需要自己去修改;確保能夠找到正確的圖片.
在需要全選按鈕的時候,在配置相中添加
showSelectAll: true
上傳效果圖:
到此OK.
最後需要注意:其中assertValue方法可能需要進行進一步優化調試.
然後這裏給出自己在項目上使用的插件壓縮包地址:https://download.csdn.net/download/sword_happy/11343561
參考文章:http://www.360doc.com/content/13/1221/23/12156113_339135250.shtml