Selection of records over multiple pages in a grid

[Mahesh Sakunala]

Hi all ,
We have a cell editor grid with pagination,in which the checkbox selection must persist across multiple pages.I came to know that we do not have standard built-in in extjs framework. But I've found a plugin for paging select persistence at http://www.sencha.com/forum/showthread.php?163418 .
I need to get the record id's of the rows selected in the multiple pages when check boxes are selected..Can any one suggest me how can i achieve it?


We use extjs framework on Force.com(Salesforce ) Platform.

Code for Store :


 var myData1=new Array();


<apex:repeat value="{!Total}" var="att">
 <apex:repeat value="{!att}" var="row">
 
  var rowArray=new Array();
  rowArray[0]='{!row.atnd.id}';
  
  var fName="{!row.atnd.AS_id__r.AS_FirstName__c}"; 
  rowArray[1]=fName.replace(/\'/g,'\'');


  var lName="{!row.atnd.AS_id__r.AS_LastName__c}";
  rowArray[2]=lName.replace(/\'/g,'\'');
  
  rowArray[3]='{!row.status}';
  
  myData1.push(rowArray);  
  </apex:repeat>
 </apex:repeat>
 
 var myDirectfn = function(opts, fn, proxy) {
    var start = opts.start,
        end = opts.limit+opts.start,
        data = [];
    if (end > myData1.length) end = myData1.length;
    for (var i = start; i < end; i++)
        data.push(myData1[i]);
    data.total = myData1.length;
    fn(data, {
        status: true,
        result: data
    });
};


myDirectfn.directCfg = {
    method: {len:1}
};


    
var store = new Ext.data.SimpleStore({
fields:[{name:'id'},{name:'FirstName'},{name:'LastName'},{name:'s'}],
pageSize: 50,
proxy: {
type: 'direct',
directFn: myDirectfn,
reader: {
type: 'array'
}
},
});
store.loadData(myData1);


Code for Grid:

var grid = Ext.create('Ext.grid.Panel',{
store: store, 
selModel: Ext.create('Ext.selection.CheckboxModel'),
viewConfig: {
loadMask: false
},        
columns: [
{header:'id', dataIndex: 'id',hidden:true }, 
{header: "<b>Name</b>",flex:2, dataIndex: 'name',
 renderer: function(value,p,r)           
 {
  return r.data['FirstName']+ ' ' + r.data['LastName'];
 }
}, 
{
 id:'s',header:"<b>Status</b>",flex:1.2, dataIndex:'s', 
 editor:
 {
 xtype:'combo',
 id:'myCombo',
 editable: false,
 store: store,
 valueField: 's,
 displayField: 's',
 listeners:
 { 
  select:{
   fn:function(combo, value,rowIndex) {
    var modelCmp = Ext.getCmp('myCombo');    
    modelCmp.getRawValue();
    alert('Selected value is '+ modelCmp.getRawValue());
   }                               
  }
 },
 },
}],
height: 300, 
width: 800,
title: GridTitle,
stripeRows:true,
bbar: new Ext.PagingToolbar({
        store: store,
        pageSize: 50,
        displayInfo: true
}),
plugins : [{ptype:'cellediting',clicksToEdit:1
},
{ ptype:'pagingselectpersist'
}],   
renderTo: Ext.getBody(),                        
});


store.loadPage(1);

Code for plugin :

Source for the plugin code is http://jsfiddle.net/Whkbu/2/

It would be great if some one can guide me on this.

Thank you,
Mahesh

[Mahesh Sakunala]

Hello folks,
I am still waiting on this problem,any possible solution for this?

[Mahesh Sakunala]

I've placed the few lines of javascript code(Green font) in select and selectPage functions to grab the id's over multiple pages.

Ext.define('Ext.ux.grid.plugin.PagingSelectionPersistence', {
alias: 'plugin.pagingselectpersist',
extend: 'Ext.AbstractPlugin',
pluginId: 'pagingSelectionPersistence',


//array of selected records
selection: [],
//hash map of record id to selected state
selected: {},
    
init: function(grid) {
 
 this.grid = grid;
 this.selModel = this.grid.getSelectionModel();
 this.isCheckboxModel = (this.selModel.$className == 'Ext.selection.CheckboxModel');
 this.origOnHeaderClick = this.selModel.onHeaderClick;
 this.bindListeners();
},




destroy: function() {
 this.selection = [];
 this.selected = {};
 this.disable();
},


enable: function() {
 var me = this;
 if(this.disabled && this.grid) {
  this.grid.getView().on('refresh', this.onViewRefresh, this);
  this.selModel.on('select', this.onRowSelect, this);
  this.selModel.on('deselect', this.onRowDeselect, this);
  if(this.isCheckboxModel) {
   this.selModel.onHeaderClick = function(headerCt, header, e) {
   var isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
   me.origOnHeaderClick.apply(this, arguments);        
   if(isChecked) {
    me.onDeselectPage();
   }
   else {
    me.onSelectPage();
    }
   };
  }
 }
 this.callParent();
},
    
disable: function() {
 if(this.grid) {
  this.grid.getView().un('refresh', this.onViewRefresh, this);
  this.selModel.un('select', this.onRowSelect, this);
  this.selModel.un('deselect', this.onRowDeselect, this);
  this.selModel.onHeaderClick = this.origOnHeaderClick;
 }
 this.callParent();
},




bindListeners: function() {
 var disabled = this.disabled;
 this.disable();
 if(!disabled) {
  this.enable();
 }
},


   
onViewRefresh : function(view, eOpts) {
 var store = this.grid.getStore(),
 sel = [],
 hdSelectState,
 rec,
 i;
 this.ignoreChanges = true;
 for(i = store.getCount() - 1; i >= 0; i--) {
  rec = store.getAt(i);
  if(this.selected[rec.getId()]) {
   sel.push(rec);
  }
 }
 this.selModel.select(sel, false);


 if(this.isCheckboxModel) {
  hdSelectState = (this.selModel.selected.getCount() === this.grid.getStore().getCount());
  this.selModel.toggleUiHeader(hdSelectState);
 }
 this.ignoreChanges = false;
},
    
onRowSelect: function(sm, rec, idx, eOpts) {
 if(this.ignoreChanges === true) {
  return;
 }
 if(!this.selected[rec.getId()]) 
 {  
  this.selection.push(rec);
  this.selected[rec.getId()] = true;
 }
  var r = grid.getSelectionModel().getSelection();  
  var results=new Array();
   for(i=0; i<=r.length-1; i++){
    var checkarray=r[i].get('id');   
   }
results.push(checkarray);
 alert('Selected Record is'+results);
},
      
onRowDeselect: function(sm, rec, idx, eOpts) {
 var i; 
 if(this.ignoreChanges === true) {
  return;
 }    
 if(this.selected[rec.getId()])
 {  
  for(i = this.selection.length - 1; i >= 0; i--) {
   if(this.selection[i].getId() == rec.getId()) {
    this.selection.splice(i, 1);
    this.selected[rec.getId()] = false;
    break;
   }
  }
 }
},
    
onSelectPage: function(){ 
 var sel = this.selModel.getSelection(),
 selectedCheckboxLength= this.getPersistedSelection().length, 
 i;
 for(i = 0; i < sel.length; i++) {
  selection1=this.onRowSelect(this.selModel, sel[i]); 
 }
 if(selectedCheckboxLength!== this.getPersistedSelection().length) {
  this.selModel.fireEvent('selectionchange', this.selModel, [], {});
 }
 var results=new Array();
 var r = grid.getSelectionModel().getSelection();  
  for(i=0; i<=r.length-1; i++){  
   var checkarray=r[i].get('id');  
   results.push(checkarray); 
   results.sort();
   for ( var i = 1; i < results.length; i++ ){
    if ( results[i] === results[ i - 1 ] ) {
     results.splice( i--, 1 );
    }  
   }   
  }  
alert('Selected Records are'+results);
},
   
onDeselectPage: function() {
 var store = this.grid.getStore(),
 selectedCheckboxLength= this.getPersistedSelection().length,
 i;
    
 for(i = store.getCount() - 1; i >= 0; i--) {
  this.onRowDeselect(this.selModel, store.getAt(i));
 }        
 if(selectedCheckboxLength!== this.getPersistedSelection().length) {
  this.selModel.fireEvent('selectionchange', this.selModel, [], {});
 }
},  
    
getPersistedSelection: function() {
  return [].concat(this.selection);
}, 
   
clearPersistedSelection: function(){ 
    var changed = (this.selection.length > 0);   
    this.selection = [];
    this.selected = {};
    this.onViewRefresh();    
    if(changed) {
     this.selModel.fireEvent('selectionchange', this.selModel, [], {});
   }
}


});