Monthly Archives: January 2011

ExtJS: Add a custom checkbox to GroupingView header

checkbox in GroupView 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({
        groupTextTpl: '{text} ({[]} {[ > 1 ? "Items" : "Item"]}) 
            <span class="gridHeaderCheckbox">
                <input type="checkbox" class="cbx"> Active

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')
    	         originalFunction.apply(this, arguments);

Posted by on January 31, 2011 in Sencha


Tags: , ,

%d bloggers like this: