Question

I have an ExtJs Grid with CheckBoxSelectionModel. Selecting the header checkbox checks all the records and deselecting the checkbox unchecks all the records, of course which is the behavior. My grid has a delete button to delete the selected/all records and is working fine.

Now my problem is, when I check the checkbox at the header (so that entire records will be selected) and hits my delete button, the entire records in the grid is getting deleted. But, the checkbox selection in the column header still remains as checked.

I used the code: grid.getSelectionModel().clearSelections(false); to clear selection, after deletion. I guess, this code is only applicable to records in the grid and has nothing to do with the column header part. Is there any way, I can deselect the chekbox in the header?

On a detailed investigation, I’s surprised to know that the checkbox displayed in the CheckBoxSelectionModel is not html checkboxes, but they are images. So my idea of deselecting the checkbox using the DOM concept cannot be applied here. Instead, some kinda CSS trick has to be done.

Does anyone faced such an issue before? Is there any solution for this?
Any help will be appreciated.
Thanks!

Answer 1

Apply listeners to CheckboxSelectionModel :

try this :

    var sm = new Ext.grid.CheckboxSelectionModel({
    listeners : {
            selectionchange : function(){
                var recLen = Ext.getCmp('grid').store.getRange().length;
                var selectedLen = this.selections.items.length;
                if(selectedLen == recLen){
                    var view   = Ext.getCmp('grid').getView();
                    var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker")
                    chkdiv.addClass("x-grid3-hd-checker-on");
                }
            }
            ,rowdeselect : function ( sm ,rowIndex ,record) {
                var view   = Ext.getCmp('grid').getView();
                var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker")
                chkdiv.removeClass('x-grid3-hd-checker-on');
            }
    }
 });