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>';
}
});
分享到:
相关推荐
几天为了改变客户端grid的全选效率问题,详细研究了ext中grid的全选和gridview中通过脚本实现的全选效率,总结一下,供大家参考,有错误的地方,希望大侠指正,小弟献丑了。
ExtJS 表格的功能实现,包括单元格编辑,数据的获取。
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
代码如下:///”./vswd-ext_2.0.2.js”> Ext.onReady(function(){ var data = [ [1,”wilson.fu”,10], [2,”wilson.fu2″,20], [3,”wilson.fu3″,30] ];... } var sm = new Ext.grid.CheckboxSele
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 ...
9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 ...
9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
9.3. 带全选的checkbox的grid A. 常见问题乱弹 A.1. 怎么查看ext2里的api文档 A.2. 想把弹出对话框单独拿出来用的看这里 A.3. 想把日期选择框单独拿出来用的看这里 B. 修改日志 C. 后记 C.1. 2007年12月5...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是...ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...