CheckboxSelectionModel extension to automatically check/uncheck header checker

[eugs51]

Problem: The grid header check status does not reflect the real state of checked items in the grid. This is not a big deal but is very annoying.Solution attached solves the issue. Enjoy

Ext.ux.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel,{
	constructor:function(config){
		Ext.ux.CheckboxSelectionModel.superclass.constructor.call(this,config);
		this.on("rowselect",this.onRowSelectUnselect,this);
		this.on("rowdeselect",this.onRowSelectUnselect,this);
	},
	onRowSelectUnselect:function(){
		//fire only the last event
		window.clearTimeout(this.__onRowSelectUnselectTimer);		
		this.__onRowSelectUnselectTimer = window.setTimeout(function(){
			var el = this.grid.getView().innerHd;		
			var sels = this.getSelections().length;
			var total = Math.max(this.grid.store.data.length,this.grid.store.getTotalCount());
			var hdinners = Ext.fly(el).query("div.x-grid3-hd-checker");
			var toCheck = total===sels;
			for(var i=0;i<hdinners.length;i++){
				var item = hdinners[i];
				if(Ext.fly(item).hasClass("x-grid3-hd-inner")){
					if(toCheck){
						Ext.fly(item).addClass('x-grid3-hd-checker-on');			                	                
		            }else{
		            	Ext.fly(item).removeClass('x-grid3-hd-checker-on');	
		            }
				}
			}			
		}.createDelegate(this),0);
	}
});

[sumit.madan]

Thanks, I was looking to solve this issue for some time. However, the line below causes the header checkbox to be never checked when using a remote store with paging.

var total = Math.max(this.grid.store.data.length,this.grid.store.getTotalCount());

I'm not sure why you need the higher number between store.data.length and store.getTotalCount(). So, I changed it to:

var total = this.grid.store.data.length;

Also, converted your extension to an override, so it would apply to all the instances of CheckboxSelectionModel:

Ext.override(Ext.grid.CheckboxSelectionModel, {
    updateHeaderCheckboxes: function(){
        //fire only the last event
        window.clearTimeout(this.__onRowSelectUnselectTimer);
        this.__onRowSelectUnselectTimer = window.setTimeout(function(){
            var hdEl = this.grid.getView().innerHd;
            var selections = this.getSelections().length;
            var totalRecords = this.grid.store.data.length;
            var hdCheckers = Ext.fly(hdEl).query('div.x-grid3-hd-checker');
            for(var i = 0; i < hdCheckers.length; i++){
                var item = hdCheckers[i];
                if(Ext.fly(item).hasClass('x-grid3-hd-inner')){
                    if(totalRecords === selections){
                        Ext.fly(item).addClass('x-grid3-hd-checker-on');
                    }else{
                        Ext.fly(item).removeClass('x-grid3-hd-checker-on');
                    }
                }
            }
        }.createDelegate(this),0);
    },
    
    initEvents: function(){
        Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);

        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
            Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);
        }, this);
        
        this.on('rowselect', this.updateHeaderCheckboxes, this);
        this.on('rowdeselect', this.updateHeaderCheckboxes, this);

        this.grid.mon(this.grid.store, 'load', this.updateHeaderCheckboxes, this);
        this.grid.mon(this.grid.store, 'write', this.updateHeaderCheckboxes, this);

    }
});

[ldashevskiy]

Listen to 'selectrow' and 'deselectrow' events and then call the following:

                    var view = pnlTable.getView();
                    t = Ext.fly(view.innerHd).child(".x-grid3-hd-checker");
                    isChecked = t.hasClass("x-grid3-hd-checker-on");


                    if ( pnlTable.getSelectionModel().getCount() != pnlTable.getStore().getCount() & isChecked ){
                        t.removeClass("x-grid3-hd-checker-on");
                    } else if ( pnlTable.getSelectionModel().getCount() == pnlTable.getStore().getCount() & ! isChecked ){
                        t.addClass("x-grid3-hd-checker-on");
                    }

where pnlTable is the gridPanel instance...