View Full Version : How to keep selections over multiple pages?

28 Aug 2009, 11:54 AM
Hi everybody,

i am currently encountering this problem:

I have a paged grid with 5 pages. The user needs to select certain rows within that grid, while navigating through all of the 5 pages (some selections on page 1, some on page 2, etc.).

How can i manage it, that the userīs selection from page 1 wonīt "dissapear", once the user moved on to another page?
The way i have it now, once the user clicks on page 2, the selections from page 1 are gone.

Any help on this is highly appreciated. Thanks for the time.

pd: I am using ExtJS 3.0 and I have tried with livegrid and nothing

29 Aug 2009, 3:00 AM
A paged grid only contains the records that are visible, so any selection can only be done on those records.

You'll have to work around this restriction:

- In the beforeload event of the store remember the selected records in a separate array. Remember that it is also possible to visit the same page twice, so the code should also be able to replace the selections in the current page.

- In the load event select the records in the store that are in the kept array.

Mike Robinson
30 Aug 2009, 6:49 AM
After writing several pp's of long-winded explanation of how you might be able to do this in ExtJS, I stripped it all out and wrote this:

~o) You might wish to consider keeping track of the selection status on the host side... it could be a boolean "field" that you simply send back-and-forth to the host as though it really were "part of the database record" even though (as only the host is aware...) it actually isn't. The host strips that information off and keeps it, say, in Session information.

"After all, why not?" :) Undoubtedly the host is (also) going to need to know what the user has selected. The already-existing mechanism for sending updates to the host (DataWriter) neither knows nor cares how the host comes up with its "records" and "fields." It knows how to track changes at a per-field level. So, you just treat the selection-status on the client side as though it were an ordinary boolean field, and track it on the server-side in the Session pool while presenting it as though it were a "real" database variable. Ext.data.Store can handle "lazy writes" and "batch writes" so you're not really losing any efficiency.

(As usual, you will need to serialize or "interlock" the session-pool updates on the host side, because the ordering of Ajax requests is unpredictable. A fast, e.g. memory-based Session implementation is important ... although that's typically always the case with Ajax.)

31 Aug 2009, 6:54 AM
Hi everybody:

Condor, Mike Robinson thanks for your answare. There are very useful but might you could help me with the exactly event where I should put my code, really I new using EXTJS.

Thanks in advance.

By the way, do you think this could work with ExtJS 3.0:

var selected = new Ext.util.MixedCollection(false, function(o){return o.id;});
var selection;

sm4 = new Ext.grid.RowSelectionModel({singleSelect: false});

store3 = new Ext.data.JsonStore({
url: '/ope_actividades/getEncontrados',
reader: new Ext.data.JsonReader
{name: 'id_cliente', type: 'string'},
{name: 'usuario', type: 'string'},
{name: 'filial', type: 'string'},
{name: 'empresa', type: 'string'}
root: 'encontrados',
totalProperty: 'total',
{name:'id_cliente', mapping:'id_cliente'},
{name:'usuario', mapping:'usuario'},
{name:'filial', mapping:'filial'},
{name:'empresa', mapping:'empresa'}
sortInfo: {field:'usuario', direction:'ASC'}

var cm3 = new Ext.grid.ColumnModel([
id: 'id_cliente',
header: 'IdCliente',
dataIndex: 'id_cliente',
hidden: true,
hideable: false
id: 'usuario',
header: 'Usuario',
dataIndex: 'usuario',
width: 70,
sortable: true
header: 'Filial',
dataIndex: 'filial',
width: 70,
sortable: true
header: 'Empresa',
dataIndex: 'empresa',
width: 130,
sortable: true

gridEncontrados = new Ext.grid.GridPanel({
store: store3,
cm: cm3,
sm: sm4,
renderTo: 'encontrados',
width: 900,
height: 200,
viewConfig: {
columnLines: true,
loadMask: {msg:'Cargando ...'},
autoScroll: true,
bbar:new Ext.PagingToolbar({
pageSize: 8,
store: store3,
displayInfo: true,
displayMsg: 'Mostrando Encontrados {0} - {1} of {2}',
emptyMsg: "No se encontro clientes para mostrar",
autoExpandColumn: 'empresa',
frame: true

sm4.on('rowdeselect', function(sm, rowIndex){
var r = ds.data.itemAt(rowIndex)
}, this);

sm4.on('rowselect', function(sm, rowIndex, r){
}, this);

Ext.override(Ext.PagingToolbar, {
onClick : function(which){
var params;
case "first":
params = {start: 0, limit: this.pageSize};
case "prev":
params = {start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize};
case "next":
params = {start: this.cursor+this.pageSize, limit: this.pageSize};
case "last":
var total = ds.getTotalCount();
var extra = total % this.pageSize;
var lastStart = extra ? (total - extra) : total-this.pageSize;
params = {start: lastStart, limit: this.pageSize};
case "refresh":
params = {start: this.cursor, limit: this.pageSize};
if(params) {
store3.load({params:params, callback: this.refreshSelected, scope: this});

refreshSelected : function() {
var toSelect = [];
if(selected.containsKey(record.id)) {
}, this);

31 Aug 2009, 6:59 AM
You could also have a look at this extension (http://extjs.com/forum/showthread.php?t=61282) (it's for Ext 2.x, but wouldn't require big changes for Ext 3.0).

31 Aug 2009, 9:17 AM
thanks "CONDOR" for your last answer, it help me a lot..