PDA

View Full Version : Clearing Selection on PagingToolbar change



nkezhaya
18 Jan 2012, 4:10 PM
How do I prevent this from occurring? I have a solution to remember the selected records when the page has changed for the Grid. When the page changes, the selected records are completely cleared, which makes it kind of impossible for me to remember the records.

lorezyra
18 Jan 2012, 6:31 PM
What type of grid are you using? Is the store using the buffered: true config?

I'm assuming that you dont have a Infinite grid if you are using a PagingToolbar... In which case, it's not practical to keep the previously selected records.


What you could consider: Create a MixedCollection of the selected records and upon loading a new grid-page, compare the record id's to the currently loaded set and reselect the matching records.


If this doesn't make sense, then perhaps you can explain the use-case a little more.

nkezhaya
18 Jan 2012, 7:20 PM
No, I'm not using buffered: true.

The use-case: I have thousands of large documents in my database and there's a search screen to delete them. Now, normally, I wouldn't have a problem just displaying them all in the grid, but they're rather large documents, and there could be thousands (or millions, potentially) of them.

The checkbox selection model is used to select the documents the user wants to delete. They should be able to flip through the pages and have the system recall which ones have been selected. However, this must also work for row deselection.


Ext.define('grid', {
selectedRows: [],

listeners: {
afterrender: function(grid) {
var store = grid.getStore(),
sm = grid.getSelectionModel();


store.on('load', function() {
var recs = [];
store.each(function(record) {
if(grid.selectedRows.contains(record.getId())) {
recs.push(record);
}
});


sm.select(recs, false, true);
});
}
},


initComponent: function() {
this.columns = [...];


this.bbar = {
xtype: 'pagingtoolbar',
store: 'lead.SearchResults',
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying leads {0} - {1} of {2}',
emptyMsg: 'No leads to display.',


items: [{
xtype: 'tbseparator'
},{
xtype: 'button',
itemId: 'pagingToolbarButton',
title: '',
iconCls: ''
}]
};


var scope = this;


this.selModel = Ext.create('Ext.selection.CheckboxModel', {
mode: 'SIMPLE',


listeners: {
select: function(rm, record) {
scope.selectedRows.push(record.getId());
},


deselect: function(rm, record) {
scope.selectedRows.remove(record.getId());
}
}
});


this.callParent();
}

});

I cannot change this functionality because this screen does much more than just deletion, and the way this (should) work is acceptable for all mechanisms of the grid; alongside the request of the client.

nkezhaya
18 Jan 2012, 7:30 PM
I solved this problem by storing the selected rows in the view. It's a shame that Sencha has released an awesome feature like the infinite grid, but without addressing such a fundamental, frustrating issue like row selection; particularly when the solution is so simple:


...
listeners: {
afterrender: function(grid) {
var store = grid.getStore(),
sm = grid.getSelectionModel();


store.on('load', function() {
var recs = [];
store.each(function(record) {
if(grid.getView().selectedRows.contains(record.getId())) {
recs.push(record);
}
});


sm.select(recs, false, true);
});
},


itemclick: function(view, record) {
if(view.selectedRows.contains(record.getId())) {
view.selectedRows.remove(record.getId());
} else {
view.selectedRows.push(record.getId());
}
}
},
...