`
kakarot_java
  • 浏览: 163731 次
  • 性别: 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>';
}
});
分享到:
评论

相关推荐

    解决ext下拉列表全选和去全选功能

    标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求,特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    这段代码确保了每次单个复选框状态改变时,都会检查并更新全选复选框的状态。 同时,为了在全选复选框被点击时同步所有其他复选框的状态,我们还需要在全选复选框的`click`事件中操作: ```javascript // 获取全选...

    Ext框架的Grid使用介绍

    EXT JS提供行选择模式,如单选、多选和全选。 6. **视图配置**:Grid的视图配置可以调整行高、行间距、鼠标悬停效果等,以优化用户体验。例如,stripeRows参数可以使行交替显示不同颜色。 7. **插件支持**:EXT JS...

    去掉gridPanel表头全选框的小例子

    此外,如果你的项目使用了自定义的主题或者CSS,可能还需要通过CSS覆盖样式来彻底隐藏全选框,防止因类名改变导致的全选框重新出现。例如,你可以添加以下CSS代码: ```css .x-grid-header-checkbox { display: ...

    ExtJS Grid功能实现

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

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

    根据部分提供的代码片段,Ext.grid.CheckboxColumn类通过监听cellclick和headerclick事件来控制选中状态。当点击某一行的CheckBox时,触发onCellClick函数,该函数通过判断列头的masterValue值来改变所有行的...

    ext-ux-grid-gridviewmenuplugin

    `Ext-UX-Grid-GridViewMenuPlugin`是一个用于Ext JS框架的用户界面扩展插件,主要功能是增强表格(grid)的菜单功能。这个插件允许开发者为表格的菜单添加自定义事件处理和生成视图,从而提升用户体验并提供更丰富的...

    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表格控件...

    Gridview读Excel分页记录选中状态跳转页面传参

    5.Checkbox用javascript控制全选 6.分页,跳到下一页,记录上一页面Checkbox选中状态 7.清除Checkbox选中状态 8.跳转页面,传参选中的Checkbox对应的姓名 之前是从网上看到的保存checkbox分页选中状态,但是没有传参...

    Ext js-2.0 带API

     再加上可编辑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 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 grid

    此功能主要是为了解决当用户在一个分页的Grid中选择某一行后,在翻页时依然保持该行被选中的状态。本文将通过解析提供的代码片段以及结合ExtJS的相关API文档,详细介绍如何实现在ExtJS Grid中的行跨页选中功能。 ##...

    extjs3.2 资源包文件

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

    ExtJS 4.2.0

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

Global site tag (gtag.js) - Google Analytics