Using PagingToolbar and CheckboxSelectionModel in a Single GridPanel

Question

I posted this on the Sencha forums, I also wanted to post it here just in case:

I have a GridPanel that uses PagingToolbar and CheckboxSelectionModel. I want to track page selections. I'm almost there, but I'm having problems with the PagingToolbar controls (like the next page) that trigger the "changechange" event in my selection model.

Here's a simplified sample of my code:

code:

var sm = Ext.create('Ext.selection.CheckboxModel', { listeners:{ selectionchange: function(selectionModel, selectedRecords, options){ console.log("Selection Change!!"); // CODE HERE TO KEEP TRACK OF SELECTIONS/DESELECTIONS } } }); var grid = Ext.create('Ext.grid.Panel', { autoScroll:true, store: store, defaults: { sortable:true }, selModel: sm, dockedItems: [{ xtype: 'pagingtoolbar', store: store, dock: 'bottom', displayInfo: true }], listeners: {'beforerender' : {fn:function(){ store.load({params:params}); }}} }); store.on('load', function() { console.log('loading'); console.log(params); console.log('selecting...'); var records = this.getNewRecords(); var recordsToSelect = getRecordsToSelect(records); sm.select(recordsToSelect, true, true); }); 

I suggested that I can select the entries in the load event and not trigger any events.

What happens here is that the changechange event is fired when the data page changes, and I don't want this to happen. Ideally, only the user's click will be tracked as "changechange" events, and not any other component events that bubble up and trigger an event on my selection model. Looking at the source code, the only event I could see was that the fires on the PagingToolbar were "changing." I tried to keep track of how the GridPanel, TablePanel, Gridview, etc. are handled, but I just don't see the path to the event. Even then, I'm not sure how to suppress events from the PagingToolbar in the SelectionModel.

Thanks in advance Tom

Answer 1

I managed to handle this. The key is to determine where the page changes. The simplest solution is to set a buffer for selecting a listener and check the Store.loading property. Here is my implementation of the selection model:

 var selModel = Ext.create('Ext.selection.CheckboxModel', { multipageSelection: {}, listeners:{ selectionchange: function(selectionModel, selectedRecords, options){ // do not change selection on page change if (selectedRecords.length == 0 && this.store.loading == true && this.store.currentPage != this.page) { return; } // remove selection on refresh if (this.store.loading == true) { this.multipageSelection = {}; return; } // remove old selection from this page this.store.data.each(function(i) { delete this.multipageSelection[i.id]; }, this); // select records Ext.each(selectedRecords, function(i) { this.multipageSelection[i.id] = true; }, this); }, buffer: 5 }, restoreSelection: function() { this.store.data.each(function(i) { if (this.multipageSelection[i.id] == true) { this.select(i, true, true); } }, this); this.page = this.store.currentPage; } 

Additional storage binding required:

 store.on('load', grid.getSelectionModel().restoreSelection, grid.getSelectionModel()); 

Working example: http://jsfiddle.net/pqVmb/

Answer 2

Lolo's solution is great, but it seems like it no longer works with ExtJS 4.2.1.

Instead of 'selectionchange' use this:

 deselect: function( selectionModel, record, index, eOpts ) { delete this.multipageSelection[i.id]; }, select: function( selectionModel, record, index, eOpts ) { this.multipageSelection[i.id] = true; }, 

Answer 3

This is a solution for ExtJs5, using MVVC to create a local store named 'selectedObjects' in the Model View with the same model as the paged grid.

Add selection and deselect listeners on the checkbox. In these functions, add or remove the selected or deselected entry from this local storage.

 onCheckboxModelSelect: function(rowmodel, record, index, eOpts) { // Add selected record to the view model store this.getViewModel().getStore('selectedObjects').add(record); }, onCheckboxModelDeselect: function(rowmodel, record, index, eOpts) { // Remove selected record from the view model store this.getViewModel().getStore('selectedObjects').remove(record); }, 

In the pagingtoolbar, add a change listener to re-select previously captured records when they appear on the page.

 onPagingtoolbarChange: function(pagingtoolbar, pageData, eOpts) { // Select any records on the page that have been previously selected var checkboxSelectionModel = this.lookupReference('grid').getSelectionModel(), selectedObjects = this.getViewModel().getStore('selectedObjects').getRange(); // true, true params. keepselections if any and suppresses select event. Don't want infinite loop listeners. checkboxSelectionModel.select(selectedObjects, true, true); }, 

After performing any action, when these elections are no longer needed. Call deselectAll on checkboxmodel and removeAll from local storage if it is not destroyed. (Windows closes, they are configured by default to call destroy and will monitor the clearing of local storage data, if this is your case)