ExtJS: Add a custom checkbox to GroupingView header

The easiest way to add a checkbox to GroupingView header is to modify view groupTextTpl property.

For example:

var grid = new Ext.grid.EditorGridPanel({
    store: store,
    columns: columns,
    ...
    view: new Ext.grid.GroupingView({
        forceFit:true,
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) 
            <span class="gridHeaderCheckbox">
                <input type="checkbox" class="cbx"> Active
            </span>'
        })
        ...
});

Unfortunately checkbox is a HTML checkbox and will be rendered as standard checkbox for the browser you are using but not as ExtJS control.

If you click on this checkbox you will notice that grid header is expanding and collapsing which is not what you might want it to do. To prevent GroupView from toggling override its processEvent event:

(function() {
    var originalFunction = Ext.grid.GroupingView.prototype.processEvent;
    
    Ext.override(Ext.grid.GroupingView, {
        processEvent : function(name, e)
    	{	
    	     if (e.getTarget().tagName == 'INPUT')
    	     {
    	         e.stopPropagation();
    	     }
    	     else
    	     {
    	         originalFunction.apply(this, arguments);
    	     }
    	}
    });
})();