`
kakarot_java
  • 浏览: 161511 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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" >&#160;</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">&#160;</div>';
}
});
分享到:
评论

相关推荐

    asp.net gridview中用checkbox全选的几种实现的区别

    几天为了改变客户端grid的全选效率问题,详细研究了ext中grid的全选和gridview中通过脚本实现的全选效率,总结一下,供大家参考,有错误的地方,希望大侠指正,小弟献丑了。

    ExtJS Grid功能实现

    ExtJS 表格的功能实现,包括单元格编辑,数据的获取。

    Ext js 教程大全

    再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    ExtJS Grid使用SimpleStore、多选框的方法

    代码如下:///”./vswd-ext_2.0.2.js”&gt; Ext.onReady(function(){ var data = [ [1,”wilson.fu”,10], [2,”wilson.fu2″,20], [3,”wilson.fu3″,30] ];... } var sm = new Ext.grid.CheckboxSele

    ext.net-extjs

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    Ext 开发指南 学习资料

    9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 ...

    EXT2.0中文教程

    9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 ...

    EXT教程EXT用大量的实例演示Ext实例

    9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合...

    Ext js-2.0 带API

     再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    深入浅出Ext JS

     再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    掏钱学Ext(完整版) 附全部源码

    9.3. 带全选的checkbox的grid A. 常见问题乱弹 A.1. 怎么查看ext2里的api文档 A.2. 想把弹出对话框单独拿出来用的看这里 A.3. 想把日期选择框单独拿出来用的看这里 B. 修改日志 C. 后记 C.1. 2007年12月5...

    EXTJS 3.0中文版文档+实例

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    ExtJS 4.2.0

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    ExtJS(ajax框架) 4.2.1

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    EXTJS 3.3.1例子

     再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...

    ExtJsPPt.zip

     再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是...ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    Extjs中文文档.pdf

     再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    extjs4.0开发技术文档

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

Global site tag (gtag.js) - Google Analytics