CheckboxSelectionModel全选后，点击下一页时还原到未选中状态

ExtJS Grid Checkbox 选中状态同步

最新推荐文章于 2022-07-29 14:55:34 发布

最新推荐文章于 2022-07-29 14:55:34 发布 · 382 阅读

文章标签：

#EXT #CSS

ext 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何解决ExtJS Grid中使用CheckboxSelectionModel时，全选按钮在翻页后状态未更新的问题。通过监听store数据变化并清空已选记录，确保全选状态与实际显示数据保持一致。

在Grid的中使用了CheckboxSelectionModel的时候会发现，在当前页选中了全选按钮，再点击分页按钮时，在新的一页里，header上的全选按钮还是处于选择状态的，下面演示一个笨一点方法：

1、在store里加入监听数据变化事件

var ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url:url,form:ff,method:'post'}),
    totalProperty:"totalCount", 
// 这里添加监听数据变化的事件，如果数据发生变休，触发清空checkbox函数
   listeners:{datachanged:clearAllSelectedCheckbox},
    reader:new Ext.data.JsonReader(
	{	root:'result',
		id:'id',
		totalProperty: 'totalCount'
	}, 
	[
		{name:"id"},
		{name:"remark"},
		{name:"domain"},
		{name:"name"}
	
						
)});

2、Grid的columns 和生成grid部分的代码就不在这里写了，跟正常情况下的写法一致，分页栏PagingToolbar。

3、clearAllSelectedCheckbox实现代码：

function clearAllSelectedCheckbox(){
	var hd = Ext.fly(grid.getView().innerHd).child('div.x-grid3-hd-checker');
	hd.removeClass('x-grid3-hd-checker-on');
	grid.getSelectionModel().clearSelections();
}

还可以通过重写PagingToolbar来实现。