[2.x] CheckboxSelectionModel header remains selected on row unselect (with fix)

[meej]

When using the Ext.grid.CheckboxSelectionModel class, the header checkbox may be selected to select all rows in the grid. However, if a row is deselected, the header checkbox remains selected, implying that all rows are still selected. The fix is trivial:



Ext.apply(Ext.grid.CheckboxSelectionModel.prototype, {

// enables simpleSelect behavior in CheckboxSelectionModel and fixes a bug
// wherein the header checkbox remains selected when rows are deselected
onMouseDown: function(e, t){
// if using left mouse button and simpleSelect or checkbox was clicked
if(e.button === 0 && (this.simpleSelect || t.className == 'x-grid3-row-checker')){
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
if(row){
var index = row.rowIndex;
if(this.isSelected(index)){
this.deselectRow(index);

// deselect checkbox header if selected
var hd = Ext.DomQuery.selectNode('.x-grid3-hd-checker', this.grid.view.innerHd);
if(hd) Ext.fly(hd).removeClass('x-grid3-hd-checker-on');
}else{
this.selectRow(index, true);
}
}
}
}

});


The above method also adds a feature to the CheckboxSelectionModel by enabling simpleSelect (as in DataView).

[dplus]

I had some problems getting the fix displayed above to work properly.

I've made some adjustments and the following fix will work in Ext v2.2:



// See: http://extjs.com/forum/showthread.php?t=44348&highlight=checkboxselectionmodel+header
Ext.apply(Ext.grid.CheckboxSelectionModel.prototype, {

// Enables selection of individual rows in CheckboxSelectionModel and fixes a bug
// wherein the header checkbox remains selected when rows are deselected
onMouseDown: function(e, t) {

// if using left mouse button and simpleSelect or checkbox was clicked
if(e.button === 0 && (t.className == 'x-grid3-row-checker' || (!this.singleSelect && Ext.fly(t).hasClass('x-grid3-cell-inner')))) {
e.stopEvent();

var row = e.getTarget('.x-grid3-row');
if(row) {
var index = row.rowIndex;
if(this.isSelected(index)) {
this.deselectRow(index);

// deselect checkbox header if selected
var hd = Ext.DomQuery.selectNode('.x-grid3-hd-checker', this.grid.view.innerHd);
if(hd)
Ext.fly(hd).removeClass('x-grid3-hd-checker-on');
} else {
this.selectRow(index, true);
}
}
}
}
});

[aaronchiang]

Ext.apply(Ext.grid.CheckboxSelectionModel.prototype,{
// Enables selection of individual rows in CheckboxSelectionModel and fixes a bug
// wherein the header checkbox remains selected when rows are deselected
onMouseDown:function(e,t){
// if using left mouse button and simpleSelect or checkbox was clicked
if(e.button===0&&(t.className=='x-grid3-row-checker'||(!this.singleSelect&&Ext.fly(t).hasClass('x-grid3-cell-inner')))){
e.stopEvent();
var row=e.getTarget('.x-grid3-row');
if(row){
var index=row.rowIndex;
if(this.isSelected(index)){
this.deselectRow(index);
// deselect checkbox header if selected
var hd=Ext.DomQuery.selectNode('.x-grid3-hd-checker',this.grid.view.innerHd);
if(hd)
Ext.fly(hd).removeClass('x-grid3-hd-checker-on');
}
else{
this.selectRow(index,true);
//Add
if(this.getCount()==this.grid.store.getCount()){
var hd=Ext.DomQuery.selectNode('.x-grid3-hd-checker',this.grid.view.innerHd);
if(hd)
Ext.fly(hd).addClass('x-grid3-hd-checker-on');
}
}
}
}
}
});

[mystix]

@aaronchiang, you might want to highlight the portion of code you changed using (http://extjs.com/forum/misc.php?do=bbcode#color) tags, and give a short explanation of what you've done.