Problem Statement: I have an ExtJS Grid with check boxes a shown in the figure below. The header check box toggles the selections of all the records in the grid. But many times I want to manually check and un-check the header check box and also I need a way to identify whether it's already checked or not.
Problem Solution: Here is a way out to find whether the header check box is selected or not.
The methods to check and uncheck the header check box are as below.
/*
* This function tells whether grid header checkbox is checked or not
*
*/
function isHeaderchecked(gridId){
var view = Ext.getCmp(gridId).getView();
var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker");
if(chkdiv.getAttribute('class') === 'x-grid3-hd-inner x-grid3-hd-checker'){
return false;
}else{
return true;
}
}
The methods to check and uncheck the header check box are as below.
/*
* This function checks grid's header checkbox
*
*/
function checkHeader(gridId){
var view = Ext.getCmp(gridId).getView();
var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker")
chkdiv.addClass('x-grid3-hd-checker-on');
}
/*
* This function un-checks grid's header checkbox
*
*/
function uncheckHeader(gridId){
var view = Ext.getCmp(gridId).getView();
var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker")
chkdiv.removeClass('x-grid3-hd-checker-on');
}