当前位置: 代码迷 >> Web前端 >> Ext4.0 Checkbox的Grid亟需选中后的分页保存
  详细解决方案

Ext4.0 Checkbox的Grid亟需选中后的分页保存

热度:543   发布时间:2012-11-22 00:16:41.0
Ext4.0 Checkbox的Grid需要选中后的分页保存

问题:

?? 在grid里实现跨页选中,也就是当在第一页选中的checkbox,在Load到第二页时返回第一页时,已经选中的不能被显示为选中

?

?解决思路:

?? 1. 首选考虑,使用数组或者map等保存我们选中的记录

????????? 在CheckboxModel中,select用来选中,deselect用来反选(取消选中),

?????????? select时,把记录保存进我们的数组中

?????????? deselect时,把数组中曾放进去的该记录删除

?? 2. 之后,在每次翻页的时候,要把曾选中的记录在该页标示为选中状态

????????? store中 ,load方法中处理,比较数组中和store中的数据,相同的记录设为选中状态

?? 3. 前2步之后,可以了,但是发现还是会在翻页中删除;

????? 原因,在load的时候,EXT4还是自动调用了deselect方法,这样就无形中删除了保存在数组中的记录

????? 因此,我们在load之前要处理: before中,我们禁用deselect方法,load之后在放入deselect方法

?

解决代码:

???

????? stroe中添加事件:

??

            listeners : {
                beforeload : function(store, operation, eOpts) {
                    Ext.apply(store.proxy.extraParams, me.getQueryParameters());
                    selMod.removeListener('deselect');
                },
                load : function(store,records,succ,eOpts) {  
                	 selMod.removeListener('deselect');
                	 var selections = new Array();  
                	 store.each(function(record){
                		              if(recordIds.length>0){
                		            	  for(i=0;i<recordIds.length;i++){
                		            		  var id=recordIds[i];
                		            		  if(record.data.tableId==id){
                		            			  selections.push(record);
                      		 					  break;
                		            		  }
                		            	  }
                		              }
                		 					
                		         });
                	selMod.select(selections,true);
                	selMod.addListener('deselect',deSelection);
                 }
            }
      
//反选:删除选中
        var deSelection=function(sm,rec){
        	 recordIds.pop(rec.data.tableId);
     	    alert("删除当前选中的记录");        };

???

var selMod=Ext.create('Ext.selection.CheckboxModel', {
            checkOnly : true,
            listeners:{
          	   select:function(sm,selection,num,opts){
            		  recordIds.push(selection.data.tableId);
                                  alert("选中当前记录");        		  
            	},
            	deselect:deSelection
            }
        });

?

  相关解决方案