RSS

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({
        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);
    	     }
    	}
    });
})();
Advertisements
 
8 Comments

Posted by on January 31, 2011 in Sencha

 

Tags: , ,

 
%d bloggers like this: