恰巧看到http://www.uspcat.com/forum.php?mod=viewthread&tid=4135&extra=page%3D1这个帖子,给了我一些灵感
我的ExtJs的版本是4.1 RC3的,表头全选会触发select和deselect,所以事情就没那么繁杂了
我的办法是实例化一个checkboxModel:
var SelectArray=Array();//记录集:所有选中的行号
var SelectDeselect=function(view,rec){delete SelectArray;}//销毁记录集中取消选中的行号
var checkboxModel=Ext.create('Ext.selection.CheckboxModel',{
listeners:{
'selectionchange':function(view,selected){//按钮联动(启用和禁用)用,可以不要
if(selected.length>0){//当前页是否有选中
grid1.down('#DownBtn').setDisabled(false);return;
}
for(i in SelectArray){//选中记录集中是否有记录
grid1.down('#DownBtn').setDisabled(false);return;
}
grid1.down('#DownBtn').setDisabled(true);//以上都没有则禁用按钮
},
'select':function(view,rec){
SelectArray=rec.get('sum_jid');//往记录集中添加选中的行号,我这里直接保存了一个值
},
'deselect':SelectDeselect
}
});
随后在store加入以下事件
listeners:{
'load':function(store){
store.each(function(rec){//循环store
if(SelectArray){checkboxModel.select(rec,true);}//和记录集比对,动态勾选
});
checkboxModel.addListener('deselect',SelectDeselect,this);//添加checkboxModel的deselect事件,第三个参数this 可不写,下同
},
'beforeload':function(){
checkboxModel.removeListener('deselect',SelectDeselect,this);//(关键)取消checkboxModel的deselect事件,换页会触发全部选中行的deselect事件
}
}
//--------------------------------------------------------
最近有会员在论坛上问如何在grid里实现跨页选中,也就是当我在第一页选中的checkbox,在我Load到第二页时返回第一页时还能显示,这个我以前在3.3中实现过,也就是定义一个 :var recordIds = new Ext.util.MixedCollection();
然后监听checkbox的select,与deselect方法,当是select时就把当前的选择行的id加入到这个集合中,当deselect时就把集合里的id去除掉!监听grid的Load方法,然后循环当前的store,当store里值与recordIds的值匹配时,就在自定义的数组里加一个,然后调用checkbox的select方法,选中:
store.each(function(record){
if(recordIds.contains(record.data.id))
arry.push(record)
checkboxModel.select(arry,true);
});
但是到了4.0里有一个问题,当grid在转到下一页时,也就是load的时候他会默认调用deselectAll这个方法,就会把我之前选中的数据全部清除掉,很是麻烦,后来自己实验了一下,grid的beforeload事件里recordIds 里面的值还存在,所以我现在的解决方法就是监听grid的beforeload方法,当进入这个方法时,调用checkbox的removeListener('deselect')去掉这个监听,当load的时候再addListeners加上这个监听,就可以完美的解决这个问题
以上解决后,还有一个问题,就是checkbox里点击grid列头的全选中按钮时,他并没有执行select,和deselect这两个事件,也就是当你想要全选某一页时,他并没有把值加到recordIds 里去,所以当你Load到下一页时值并没有被保存起来,
这个解决方法就是监听grid的headerCt的headerclick方法,代码如下:
this.gridPanel.headerCt.on('headerclick',function(headerCt,column,e,t){
var checkHd = headerCt.child('gridcolumn');
var isChecked = checkHd.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
if (checkHd) {