Pages

Wednesday, June 27, 2012

Check / Un-check ExtJS Grid header check box

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.
/*
 * 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');
}

No comments:

Post a Comment