PDA

View Full Version : [2.0b1] Ext.ux.grid.plugins.GroupCheckboxSelection



rstuven
30 Oct 2007, 1:20 PM
Hi,
This plugin allows you to select all items of a group using a checkbox in the group header.

The grid must use a GroupingView and a selection model with singleSelect=false. Usage in combination with CheckboxSelectionModel is optional.

To try it, just extract the attached files to Ext "examples/grid" directory and open group-checkbox.html (this example is derived from the built-in "grouping" example).

tchitani
30 Oct 2007, 9:33 PM
Great plug-in. Few points: after regrouping by any other column, the selections need to be reset or if you would like to keep the selection rows, you need to apply "checked" status to all new group checkboxes.

Thank you
Nik

Grimsk
31 Oct 2007, 4:55 AM
good job needed it ;)

andrei.neculau
5 Nov 2007, 1:57 AM
First of all - your plugin doesn't work. I tried your testcase, and when ticking the group checkbox, only the last item in the group gets ticked.

Second of all - a live demo is a must for all extensions and plugins, as a form of respect to developers' time!

rstuven
5 Nov 2007, 11:45 AM
First of all - your plugin doesn't work. I tried your testcase, and when ticking the group checkbox, only the last item in the group gets ticked.

The plugin works (though it's not the panacea, I welcome every constructive suggestion)... but the example didn't. As myself remarked above, singleSelect option must be false, but I uploaded a wrong test example with singleSelect:true... I'm sorry. Thanks for pointing my mistake. It's already fixed in the attachment.


Second of all - a live demo is a must for all extensions and plugins, as a form of respect to developers' time!

You must be kidding... I do respect the community contributing back at least a little part of all I have received. Each of us has its own resources and constraints, so please you respect that. I prefer to share something than to share anything. Besides, it seems the other commenters did save time :)

nooneyet
3 Dec 2007, 7:43 AM
As heidtmare pointed out here:
http://extjs.com/forum/showthread.php?t=16346&page=2
the groupTextTpl sadly pulls its text from the rendered field, not from the core data...

So your great plugin (*and it is indeed very cool - and I really needed it, so thanks.) breaks down when grouping by a rendered field.

Until they fix this issue, here's an ugly patch I used to make your plugin work:

1. In the field renderer function I wrapped the data value with a special delimiters, e.g.

return '<span style=\'font-weight:bold;color:green;\'><XXX>' + val + '</XXX></span>';

2. Inside GroupCheckboxSelection.js, right after the line

var value = parts[1].trim();
I've put this unobtrusive patch:

//////PATCH: the renderer used for the grouped field injects all its rendered HTML to the value... so try to extract a <XXX>val</XXX> value
try{
var tmp1 = (text.split("<XXX>"))[1];
var tmp2 = (tmp1.split("</XXX>"))[0];
value = tmp2;
}
catch(e){}

This of course doesn't yet help with the fact that the group text shows the rendered HTML, but at least your plugin still works...
Anyway, thanks!
--
No'am Peled
http://www.NoamPeled.com/

JorisA
4 Dec 2007, 4:00 AM
andrei.neculau don't start about the respect blabla. You should respect the people who share their efforts.

Rstuven I didn't try your extension yet, but I like the idea, so thnx. (and a live demo would be nice;))

ebizviz
14 Jan 2008, 2:01 PM
It is very useful function.

I see one issue:

Whenever I click on any other place in the grid other then the check box, the entire previous selections are unchecked. I have to recheck again, this will be frustration expereience for the end user.

Do you have any suggestions, on how to fix?

Thanks

Aarif

innovator2
26 Nov 2008, 1:14 AM
Please help me out in placing the checkbox before the group collapse/expand image. Currently, it is being displayed between that image and the header text. Find the attached thumbnail.

:s

Thanks,
Innovator2

turbovegas
6 Mar 2009, 8:13 AM
Awesome plugin rstuven! I saw that you were using a normal input checkbox element to control the selecting/deselecting of all rows, so I thought I'd spruce it up and use the Ext checkboxes instead. Here's what I did:

Near the top, change the grid.view.groupTextTpl setter to the following (had to use dl/dd elements instead of div's because the grouping css overrides all divs :():


grid.view.groupTextTpl =
['<dl class="x-grid3-td-checker" style="height:18px; border:0px !important">',
'<dd class="x-grid3-row-checker" style="width:18px; float:left;" x-grid-group-hd-text="{text}">&nbsp;</dd>',
'<dd style="float:left; padding:3px 0px 0px 3px;">',
grid.view.groupTextTpl,
'</dd>',
'</dl>'
].join('');Next, change the behaviors to check the ".x-grid3-row-checker" instead of the ".x-grid-group-checkbox" class (do this for the mousedown event too):

From:

behaviors[id + ' .x-grid-group-hd .x-grid-group-checkbox@click']To:

behaviors[id + ' .x-grid-group-hd .x-grid3-row-checker@click']Finally, add the following lines right above the loop that checks/unchecks all rows:


var hd = Ext.fly(target.parentNode)
target.checked = !hd.hasClass('x-grid3-row-selected');
if (target.checked)
hd.addClass('x-grid3-row-selected');
else
hd.removeClass('x-grid3-row-selected');That should do it. I've tested in FF3 and IE7.

tonedeaf
7 Mar 2009, 10:37 AM
This extension doesn't work for me in Firefox 3.0.6 and IE6. I'm using ExtJS 2.2.1

The group checkbox starts working like the expand/collapse button and hides and shows the rows when clicked. And it doesn't affect the selection of the rows in the group at all.

http://xs537.xs.to/xs537/09106/groupcheckbox111.png

Raz0r
14 Mar 2009, 11:12 AM
Great plugin, however there are some implementation bugs.
First of all the author of the plugin did not consider the fact that rendered data in the grid may differ from that which is in data.GroupingStore:

var text = target.getAttribute("x-grid-group-hd-text");
This is an incorrect approach, however I still can't find a way to extract real values from data.GroupingStore which are currently grouped.
Assuming that no rendering is performed on the grid values the method that is used in the plugin to get values of grouped field allows to select the rows correctly. But if some rendering is preformed (e.g. wrapping the values with some extra markup) there would arise a lot of mistakes. For instance, if the rendered value has ':' symbol(s) no rows would be selected due to the code below:

var parts = text.split(":");
To prevent this, splitting should be performed on the ": " symbols and all the tags must be stripped:

var value = Ext.util.Format.stripTags(parts[1]);
As for date fields, the plugin does not work with them totally. In data.GroupingStore they look like Sat Mar 14 2009 00:00:00 GMT+0300 but actually these fields are usually displayed via DateRenderer, so the data would be completely different.

Unfortunately, Ext does not provide any functionality to get current grouping state. Any ideas?

proximus121
18 Mar 2009, 3:27 AM
It seems it doesn't work for versions higher than 2.2

proximus121
23 Mar 2009, 8:09 AM
Can anyone help? The event handling has changed in version 2.2 and higher and the plugin doesn't work anymore .. I can't figure out how to catch and stop the expand/collapse event. Any help would be appreciated.
Thanks

eguchi80
1 Jul 2009, 11:12 PM
Same for me, I need this feature in ext2.2

sp_extjs
7 Jul 2009, 10:44 AM
Any one has figured out, how to make this plugin work with ext 2.2.1 lib

jarlau
20 Jul 2009, 10:08 PM
I've tested the below code and it should work on 2.2.1 & 2.3.

modified version of GroupCheckboxSelection.js


Ext.namespace("Ext.ux.grid.plugins");

Ext.ux.grid.plugins.GroupCheckboxSelection = {

init: function(grid){
this.grid = grid;

grid.view.groupTextTpl =
['<dl style="height:18px; border:0px !important">',
'<dd class="x-grid3-hd-checker" style="width:18px; float:left;" x-grid-group-hd-text="{text}">&nbsp;</dd>',
'<dd style="float:left; padding:3px 0px 0px 3px;">',
grid.view.groupTextTpl,
'</dd>',
'</dl>'
].join('');

grid.on('render', this.initBehaviors, this);
},
initBehaviors: function() {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onGroupMouseDown, this);
},
onGroupMouseDown: function(e, t) {
var grid = this.grid;
if(e.button === 0 && t.className == 'x-grid3-hd-checker'){ // Only fire if left-click

var hd = Ext.fly(t.parentNode)
t.checked = !hd.hasClass('x-grid3-hd-checker-on');
if (t.checked)
hd.addClass('x-grid3-hd-checker-on');
else hd.removeClass('x-grid3-hd-checker-on');

var ds = grid.getStore();
var sm = grid.getSelectionModel();
var cm = grid.getColumnModel();
var text = t.getAttribute("x-grid-group-hd-text");

var parts = text.split(":")

var value = parts[1].trim();
var header = parts[0].trim();
var field = cm.getColumnsBy(function(columnConfig, index){
return (columnConfig.header == header);
})[0].dataIndex;

var records = ds.query(field, value).items;

for(var i = 0, len = records.length; i < len; i++){
var row = ds.indexOf(records[i]);
if (t.checked) {
sm.selectRow(row, true);
}
else {
sm.deselectRow(row);
}
}
// expand group
var view = grid.getView();
view.toggleGroup(view.getGroupId(value), Ext.isIE ? false : true);
}
}
}

ninoguba
21 Jul 2009, 3:53 PM
I've tested the below code and it should work on 2.2.1 & 2.3.

modified version of GroupCheckboxSelection.js


Ext.namespace("Ext.ux.grid.plugins");

Ext.ux.grid.plugins.GroupCheckboxSelection = {

init: function(grid){
this.grid = grid;

grid.view.groupTextTpl =
['<dl style="height:18px; border:0px !important">',
'<dd class="x-grid3-hd-checker" style="width:18px; float:left;" x-grid-group-hd-text="{text}">&nbsp;</dd>',
'<dd style="float:left; padding:3px 0px 0px 3px;">',
grid.view.groupTextTpl,
'</dd>',
'</dl>'
].join('');

grid.on('render', this.initBehaviors, this);
},
initBehaviors: function() {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onGroupMouseDown, this);
},
onGroupMouseDown: function(e, t) {
var grid = this.grid;
if(e.button === 0 && t.className == 'x-grid3-hd-checker'){ // Only fire if left-click

var hd = Ext.fly(t.parentNode)
t.checked = !hd.hasClass('x-grid3-hd-checker-on');
if (t.checked)
hd.addClass('x-grid3-hd-checker-on');
else hd.removeClass('x-grid3-hd-checker-on');

var ds = grid.getStore();
var sm = grid.getSelectionModel();
var cm = grid.getColumnModel();
var text = t.getAttribute("x-grid-group-hd-text");

var parts = text.split(":")

var value = parts[1].trim();
var header = parts[0].trim();
var field = cm.getColumnsBy(function(columnConfig, index){
return (columnConfig.header == header);
})[0].dataIndex;

var records = ds.query(field, value).items;

for(var i = 0, len = records.length; i < len; i++){
var row = ds.indexOf(records[i]);
if (t.checked) {
sm.selectRow(row, true);
}
else {
sm.deselectRow(row);
}
}
// expand group
var view = grid.getView();
view.toggleGroup(view.getGroupId(value), Ext.isIE ? false : true);
}
}
}


The above code doesn't work on version 3. I get the following error:


'1' is null or not an objectCan someone please make it work on the latest ExtJS version? Thanks.

jarlau
22 Jul 2009, 3:23 AM
Did you try the author's zip file and replace the modified version of GroupCheckboxSelection.js?
I have a brief test on extjs 3.0 and it works too.

or post your code...

ninoguba
22 Jul 2009, 8:39 PM
Did you try the author's zip file and replace the modified version of GroupCheckboxSelection.js?
I have a brief test on extjs 3.0 and it works too.

or post your code...

yes I already tried running his example with the modified version with ExtJS 3 and it didn't work. anyway, since this is not working I started to develop my own. will share if I'm succesful...

EDIT: oops my mistake. it is actually working in ExtJS 3.0. the reason it seems it didnt work for me is i have the GroupCheckboxSelection.js in two places and I only updated one copy that is not the one that is being loaded by my webpage.

ninoguba
27 Jul 2009, 4:10 PM
Hi All,

I would like to share what I have. Provides the same functionality as this plugin but enhanced to look more seamless with the CheckboxSelectionModel (the group checkbox appears on the checkbox selection column, before the group expand/collapse column).

Also added the functionality to provide a condition for not showing the group header. Useful for cases where you dont want the group headers to appear if the group only has one record or you like your grid to appear as if you have a mixed grouped and ungrouped records.

Here's the code:




/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');
/**
* @class Ext.ux.grid.GroupHeaderCustomizer
* @extends Ext.grid.GroupingView
* A GridPanel plugin that hides the group header when there is not more
* than 1 record in the group
*/
Ext.ux.grid.GroupHeaderCustomizer = Ext.extend(Ext.grid.GroupingView, {
/**
* @cfg {String} showGroupHeaderCondition
* Set it to the condition that when it evaluates to true, it renders the group header visible (defaults to 'true').
*/
//showGroupHeaderCondition : 'values.rs[0].data["batchID"] != ""',
showGroupHeaderCondition : 'true',

/**
* @cfg {Boolean} addGroupHeaderCheckbox
* Set it to false to disable rendering a checkbox in the same row as the group header (defaults to true).
*/
addGroupHeaderCheckbox : true,

/**
* @cfg {String} showGroupRowBodyCondition
* Set it to the condition that when it evaluates to true, it renders the group row body visible (defaults to 'true').
*/
//showGroupRowBodyCondition : 'values.rs[0].data["batchComment"] != ""',
showGroupRowBodyCondition : 'true',

/**
* @cfg {String} groupSubTextTpl
* Set it to the text you want to appear in the row body.
*/
groupSubTextTpl : '',
init: function(grid) {
var gview = grid.getView();

gview.interceptMouse = gview.interceptMouse.createInterceptor(function(e) {
var obj = e.getTarget('.x-grid3-grouphd-checker');
var obj2 = e.getTarget('.grid-batch-action-icon');
var obj3 = e.getTarget('.x-grid3-td-checker');
if (obj) {
//toggle group header checkbox
var hd = Ext.fly(obj.parentNode)
var checked = !hd.hasClass('x-grid3-grouphd-checker-on');
if (checked) {
hd.addClass('x-grid3-grouphd-checker-on');
} else {
hd.removeClass('x-grid3-grouphd-checker-on');
}

//toggle group row checkbox(es)
var groupId = obj.id.replace(/ext-gen[0-9]+-gp-/, '');
var records;
var store = grid.getStore();
if (groupId) {
var re = new RegExp(RegExp.escape(groupId));
records = store.queryBy(function(r) {
return r._groupId.match(re);
});
records = records ? records.items : [];
}
var sm = grid.getSelectionModel();
for(i = 0, len = records.length; i < len; i++){
if (checked) {
sm.selectRow( store.indexOf(records[i]) , true );
} else {
sm.deselectRow( store.indexOf(records[i]) );
}
}

//prevent group collapse/expand
return false;
}
else if (obj2)
{
//prevent group collapse/expand
return false;
}
else if (obj3)
{
//prevent group collapse/expand
return false;
}
});

gview.startGroup = new Ext.XTemplate(
'<div id="{groupId}" class="x-grid-group {cls}">',
'<div id="{groupId}-hd" class="x-grid-group-hd" style="{[',this.showGroupHeaderCondition,' ? "" : "display:none;"]}">',
'<div class="x-grid3-row x-grid3-row-expanded" style="width: 100%; height:auto !important;">',
'<table class="x-grid3-row-table" cellspacing="0" cellpadding="0" border="0" style="width:100%;">',
'<tbody>',
'<tr>',
'<td class="x-grid3-col x-grid3-cell x-grid3-td-checker" tabindex="0" style="width: 18px; {[',this.addGroupHeaderCheckbox,' ? "" : "display:none;"]}"><div class="x-grid3-cell-inner x-grid3-col-checker" unselectable="on"><div id="{groupId}" class="x-grid3-grouphd-checker"> </div></div></td>',
'<td class="x-grid3-col x-grid3-cell x-grid3-td-title" tabindex="0" style="width: 100%;"><div class="x-grid-group-title">', gview.groupTextTpl, '</div></td>',
'</tr>',
'<tr class="x-grid3-row-body-tr" style="{[',this.showGroupRowBodyCondition,' ? "" : "display:none;"]}">',
'<td class="x-grid3-body-cell" hidefocus="on" tabindex="0" colspan="2"><div class="x-grid3-row-body" style=" height:auto !important;">', gview.groupSubTextTpl ,'</div></td>',
'</tr>',
'</tbody>',
'</table>',
'</div>',
'</div>',
'<div id="{groupId}-bd" class="x-grid-group-body">'
);
}
});


Here's the required CSS:




.x-grid3-grouphd-checker {
width:100%;
height:18px;
background-position:2px 2px;
background-repeat:no-repeat;
background-color:transparent;
}
.x-grid3-grouphd-checker-on .x-grid3-grouphd-checker {
background-position:-23px 3px;
}
.x-grid3-grouphd-checker {
background-image:url(../../resources/images/default/grid/row-check-sprite.gif);
}
.x-grid3-grouphd-row td {
-moz-outline: none;
-moz-user-focus: normal;
}
.x-grid3-grouphd-row td {
line-height:13px;
vertical-align: top;
padding-left:1px;
padding-right:1px;
-moz-user-select: none;
-khtml-user-select:none;
-webkit-user-select:ignore;
}
.x-grid-group-hd .x-grid3-row .x-grid3-row-expanded .x-grid3-row-table .x-grid3-col .x-grid3-cell .x-grid3-td-title div.x-grid-group-title {
background:transparent no-repeat 3px 3px;
padding:4px 4px 4px 17px;
background-image:url(../../resources/images/default/grid/group-collapse.gif);
color:#3764a0;
font:bold 11px tahoma, arial, helvetica, sans-serif;
}
.x-grid-group-collapsed .x-grid-group-hd .x-grid3-row .x-grid3-row-expanded .x-grid3-row-table .x-grid3-col .x-grid3-cell .x-grid3-td-title div.x-grid-group-title {
background-image:url(../../resources/images/default/grid/group-expand.gif);
}
.x-grid-group-hd .x-grid3-row-expanded .x-grid3-row-body {
padding-bottom:0px;
display:block !important;
}



To use, just add an instance of the plugin to your GridPanel. Works on ExtJS3 and tested on IE6 and FF3.5.

Known incompatibility: will require changes if using RowActions plugin with groupActions defined.

Any help to make it compatible will be nice! Also help to correctly render the group header checkbox when the grid header checkbox is checked/unchecked (when checking/unchecking all) will also be appreciated.

Here's the screenshot:
http://extjs.com/forum/attachment.php?attachmentid=15267&stc=1&d=1248739228

Thanks,
Nino

bpratt65
26 Jan 2011, 4:33 PM
Nino,

Thanks, this looks like a nice plugin, but please expound on the phrase "just add an instance of the plugin to your GridPanel." Is this what you mean?

var ghc = new Ext.ux.grid.GroupHeaderCustomizer();
...
{
xtype: 'grid',
plugins: [ghc]
...
}

I tried this but it didn't work.

thanks!!
Bri

ninoguba
27 Jan 2011, 10:24 AM
Nino,

Thanks, this looks like a nice plugin, but please expound on the phrase "just add an instance of the plugin to your GridPanel." Is this what you mean?

var ghc = new Ext.ux.grid.GroupHeaderCustomizer();
...
{
xtype: 'grid',
plugins: [ghc]
...
}

I tried this but it didn't work.

thanks!!
Bri

If you just did it the way you did, then it will implement the defaults, which is to show all group headers and show a checkbox beside the group header. Is this not happening in your case?

If you want to change the defaults, you have to do something like this:



var ghc = new Ext.ux.grid.GroupHeaderCustomizer({
showGroupHeaderCondition: 'values.rs[0].data["yourdatafield"] != "yourdatavalue"',
addGroupHeaderCheckbox : true
});


Let me know if you need further help on this.

Thanks,
Nino

bpratt65
27 Jan 2011, 3:37 PM
Nino,

Thanks for your response but the control doesn't render at all and appears to be falling apart as the GroupHeaderCustomizer control is initialized.

Do you have a working example of this component?

thanks,

Brian

ninoguba
27 Jan 2011, 4:03 PM
Nino,

Thanks for your response but the control doesn't render at all and appears to be falling apart as the GroupHeaderCustomizer control is initialized.

Do you have a working example of this component?

thanks,

Brian

Ok will try to put up a live working example.

ninoguba
3 Feb 2011, 1:32 PM
While I'm working on putting an example online, please take note that this plugin was developed for version 3.0. It appears the code needs to be modified to make work with the latest version of ExtJS.

ninoguba
3 Feb 2011, 2:35 PM
While I'm working on putting an example online, please take note that this plugin was developed for version 3.0. It appears the code needs to be modified to make work with the latest version of ExtJS.

Here's a live example:
http://www.gubster.com/ext/examples/grid/grouping.html

Forgive me if the page loads slowly or inconsistently. This is a problem with my current hosting. Any recommendations?

ninoguba
4 Feb 2011, 3:33 PM
You'll also need to have the following code added explicitly if you're not yet using it:



//add RegExp.escape if it has not been already added
if('function' !== typeof RegExp.escape) {
RegExp.escape = function(s) {
if('string' !== typeof s) {
return s;
}
// Note: if pasting from forum, precede ]/\ with backslash manually
return s.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1');
}; // eo function escape
}


Credits to the RowActions extension.

bpratt65
7 Feb 2011, 9:36 AM
ninoguba,

Thank you for posting the live example. I really appreciate it and I think this will really help.

I can't wait to implement GroupHeaderCustomizer in our product. I think it is such a nice improvement. I'll keep you posted on our progress.

THANKS!!

Brian

bpratt65
7 Feb 2011, 10:50 AM
ninoguba,

Please see the attached image. Any idea why the checkbox appears as a gray patch on my group rows?

I also get the following error when I click on the gray patch area (where the checkbox should be).

row is undefined
chrome://firebug/content/blank.gif return doInsert(el, o, returnElement, beforebegin); ext-all-debug.js (line 366)


I am using ExtJS 3.2.1.

thanks!!
Brian

ninoguba
7 Feb 2011, 11:10 AM
Ok you're using version 3.2.1, I coded this plugin for use with 3.0. As I was trying to put up an example for you, I realized that it is not working on the later versions of ExtJS (3.3.0). So if you want to use this plugin in your application using that version, you will have to get your hands dirty and modify the code. Not sure I have the time right now to spend to make it compatible with the latest version. My extension to GroupingView isn't that complex so maybe you can tweak it a little to make it work.

Also you might want to make sure the relative paths in my GroupHeaderCustomizer.css is correct in your environment. Likely that is the reason you're not seeing the checkbox on the group header.

bpratt65
8 Feb 2011, 8:27 AM
Nino,

I appreciate your efforts on this very much.

I have verified all relative paths even before I posted. I'll see what I can do to modify the code to a 3.2.1 solution, though your code is a bit of a mystery to me (since I am relatively new to ExtJS).

thanks again,

Brian

bpratt65
8 Feb 2011, 2:33 PM
Nino,

I apologize. I verified all relative paths but one. I overlooked the URL for x-grid3-grouphd-checker in GroupHeaderCustomizer.css. This resolved the gray patch issue.

Thanks again for your efforts.

Brian

bpratt65
16 Feb 2011, 2:49 PM
GroupCheckboxSelection is a great custom control! Thanks for your efforts.

Is there a way to get the list of what groups items that are checked? I can get the items in the grid rows that are checked using the getSelections() method on the selectionModel, but I can't find a way to get the checked group items.

thanks!

Brian

ninoguba
16 Feb 2011, 4:12 PM
getSelection() already returns you all rows selected. Do you also need them to be grouped as well when the list us returned?

bpratt65
18 Feb 2011, 3:16 PM
What I mean is that if I had the following grid (see attached image) and I called myselectionModel.getSelections(), I expect it to return an array of five items... four for the individuals (Mike Strong, Audrey Johnson, Cathy Johnson and Heidi Bell) and one more for the school (JFK High) since it has a checkbox next to it. However, it only returns four items. How can I get the list of group items that are checked, too?

thanks,

Brian

ninoguba
18 Feb 2011, 5:48 PM
That should be as easy as getting the distinct group text value of the selected items and add it to your array. If you good with css and dom then you can look for group header checkboxes that are checked. Hope this helps.

bain4111
13 Jun 2011, 10:04 AM
If anyone is interested in a 4.0 version of this, I took a stab at it here:

http://www.sencha.com/forum/showthread.php?136333-Checkboxes-on-group-header-rows-on-a-group-grid&p=613531