View Full Version : Override selectAll method in CheckboxSelectionModel

10 Nov 2010, 9:39 AM

I have a GridPanel that gets its data from a GroupingStore and has a CheckboxSelectionModel. At this point, everything is working fine. For simplicity's sake, my data looks like this:

TransactionID (this is unique...one transaction per row)
AppID (one app can have one or more transactions...this is the default grouping)
TransactionDate (each transaction has a date/time stamp)

Then the data is loaded, the transactions are shown grouped by AppID and, within each AppID they are in descending order by TransactionDate (i.e. most recent at the top).

What I need to be able to do is to change the way the selectAll method works. Rather than selecting all of the TransactionIDs I need to have the select all checkbox only select the most recent TransactionID for each AppID (these TransactionIDs will be sent to the server for processing and only one transaction should be processed per app).

What would be the best way to approach this? Thanks in advance for any guidance!


10 Nov 2010, 9:57 AM
You don't have to override the selectAll method of the selection model... are you going to need this behaviour in many different grids?

I would simply write another method (perhaps in the grid class) that does the job. The code (http://dev.sencha.com/deploy/dev/docs/source/RowSelectionModel.html#method-Ext.grid.RowSelectionModel-selectAll) in the selectAll method is simple. You can take the same code but instead of looping over all items, you would find the right records to loop over.

10 Nov 2010, 10:51 AM
Ok, that makes sense...this is only needed in a single grid so no need to make this too universal. So, if I had a custom selectAll function, where would the best place be to call that? I see there's a "headerclick" event on the grid panel. It seems like there should be a "selectAll" event that is fired on the grid's selection model that I could listen for, but I'm not seeing one. Any thoughts?

10 Nov 2010, 11:49 AM
I have never used a CheckboxSelectionModel, is there an ui element you can click that currently triggers the selectAll() method to get called? If there is, you can maybe override the selectAll method for that instance of CheckboxSelectionModel.


new Ext.grid.GridPanel({
sm: new Ext.grid.CheckboxSelectionModel({
selectAll: function () { /*your logic*/ }

10 Nov 2010, 2:58 PM
I'm 90% there. Thanks to your help, when I select the checkbox in the grid's header the following things occur:

The data is grouped by AppID (to force things back to their default setup)
The records (TransactionID) within each AppID are sorted by TransactionDate
The data is looped through and the first (i.e. most recent) transaction for each AppID is selected

This is exactly what I was looking for. However, there are a couple of quirks:

Normally, when you click the checkbox at the top of the column to select all records, that checkbox is shown as being checked. That's not happening...the correct records are being selected (and their corresponding checkboxes are being checked) but the header isn't changing like it normally would.
Related to the previous point, I am also unable to clear the selections by clicking on the column header checkbox. Basically, once the records have been selected, the checkbox in the header (which should toggle between selectAll() and clearSelections()) just seems to be dead.

This is the relevant code:

var selectionModel = new Ext.grid.CheckboxSelectionModel({
checkOnly: true,
selectAll: function() {
var store = this.grid.getStore();
var currentAppId;
var recordsToSelect = new Array();
store.sort("statusTime", "DESC");
if(record.get("appId") != currentAppId) {
currentAppId = record.get("appId");

I'm not sure if it matters at all, but the data for the grid is coming from the server via a JsonReader.

Thanks again for your feedback!

10 Nov 2010, 3:06 PM
That's because you told the internal functions that those rows aren't part of the result of selectAll, huh?

Why did you not try this?

new Ext.grid.CheckboxSelectionModel({
onHdMouseDown: function(e, t) {
if(t.className == 'x-grid3-hd-checker'){
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
superSelect: function() {
//your logic

That'll be bout tree fitty.