PDA

View Full Version : Selection of records over multiple pages in a grid



Mahesh Sakunala
29 Oct 2012, 6:37 AM
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
30 Oct 2012, 4:54 AM
Hello folks,
I am still waiting on this problem,any possible solution for this?

Mahesh Sakunala
27 Feb 2013, 1:49 PM
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, [], {});
}
}


});