Ext grid 全选框 状态

ext grid 如果设定了复选框,他自动会有个功能,就是全选,但是当翻页的时候全选框的状态没有随着更新,而是停留在上次操作的状态,这个问题可以通过修改源码或者重写CheckboxSelectionModel,以下是源码
/*
* Ext JS Library 2.2.1 Copyright(c) 2006-2009, Ext JS, LLC. licensing@extjs.com
*
* http://extjs.com/license
*/

/**
* @class Ext.grid.CheckboxSelectionModel
* @extends Ext.grid.RowSelectionModel A custom selection model that renders a
* column of checkboxes that can be toggled to select or deselect rows.
* @constructor
* @param {Object}
* config The configuration options
*/
Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {
hdCheckAllId:'kaka-hd-check-all-id',
/**
* @cfg {String} header Any valid text or HTML fragment to display
* in the header cell for the checkbox column (defaults to
* '<div class="x-grid3-hd-checker"> </div>'). The
* default CSS class of 'x-grid3-hd-checker' displays a
* checkbox in the header and provides support for automatic
* check all/none behavior on header click. This string can be
* replaced by any valid HTML fragment, including a simple text
* string (e.g., 'Select Rows'), but the automatic check
* all/none behavior will only work if the 'x-grid3-hd-checker'
* class is supplied.
*/
header : '<div class="x-grid3-hd-checker" kaka-hd-Check-All-Id="kaka-hd-Check-All-Id" > </div>',
/**
* @cfg {Number} width The default width in pixels of the checkbox
* column (defaults to 20).
*/
width : 20,
/**
* @cfg {Boolean} sortable True if the checkbox column is sortable
* (defaults to false).
*/
sortable : false,

// private
menuDisabled : true,
fixed : true,
dataIndex : '',
id : 'checker',

// private
initEvents : function() {
//alert(this.hdCheckAllId);
this.hdCheckAllId = this.grid.getId()+"-hdCheckAllId";
this.header = this.header.replace('"kaka-hd-Check-All-Id"',this.hdCheckAllId);
Ext.grid.CheckboxSelectionModel.superclass.initEvents
.call(this);
this.grid.on('render', function() {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown,
this);
Ext.fly(view.innerHd).on('mousedown',
this.onHdMouseDown, this);

}, this);

this.on('selectionchange', function(sm_) {
// alert(sm_.getCount()+"/"+thisGrid.pageSize);
var checker = Ext.DomQuery
.selectNode('div[kaka-hd-Check-All-Id='+this.hdCheckAllId+']');
//alert(checker);
if (checker && checker.parentNode) {
var hd = Ext.fly(checker.parentNode);
if (hd && hd.addClass) {
if (sm_.getCount() == this.grid.getStore()
.getCount()) {
hd.addClass('x-grid3-hd-checker-on');
} else {
hd.removeClass('x-grid3-hd-checker-on');
}
}
}
});
},

// private
onMouseDown : function(e, t) {
if (e.button === 0 && t.className == 'x-grid3-row-checker') { // Only
// fire
// if
// left-click
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
if (row) {
var index = row.rowIndex;
if (this.isSelected(index)) {
this.deselectRow(index);
} else {
this.selectRow(index, true);
}
}
}
},

// private
onHdMouseDown : function(e, t) {
if (t.className == 'x-grid3-hd-checker') {
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if (isChecked) {
hd.removeClass('x-grid3-hd-checker-on');
this.clearSelections();
} else {
hd.addClass('x-grid3-hd-checker-on');
this.selectAll();
}
}
},

// private
renderer : function(v, p, record) {
return '<div class="x-grid3-row-checker"> </div>';
}
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值