ExtJS: Add a custom checkbox to GroupingView header

31 Jan

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: , ,

8 responses to “ExtJS: Add a custom checkbox to GroupingView header

  1. Scott Kosman

    January 31, 2011 at 12:25 pm

    Good to see you posting again!

    • Dasha

      January 31, 2011 at 12:28 pm

      Glad to see somebody is actually reading this! Thanks 🙂

  2. Scott Kosman

    January 31, 2011 at 12:53 pm

    On the internet, someone’s always reading. 😉

    It’s a very rare day that I remove something from my Google Reader feed, and it’s always a nice surprise when a blog I’d assumed had gone silent shows up again, and an even better surprise when it’s on a topic that I’m currently researching. Perfect timing!

    • Dasha

      January 31, 2011 at 1:34 pm

      Are you researching on ExtJs then? How do you find it? I have been working with it for the last year and have to say I really enjoyed it.

      • Scott Kosman

        January 31, 2011 at 1:39 pm

        I haven’t read much about ExtJS specifically, but I’ve been looking a lot into Javascript MVC (or, rather MVVM) frameworks. Backbone.js and knockout.js are the two I’ve looked at the most, but I’ve heard a lot of people mention ExtJS as a really good library as well. Been meaning to dig into it further, just a matter of finding the time to do so.

  3. Terry

    June 12, 2011 at 4:21 pm

    Hi, I was searching around looking for something similar to what you did here. First, I’m a java guy and the only front end stuff I’ve done is with flex using actionscript. I’ve decided to look into reproducing what I did in actionscript using another front end that doesn’t require a pluggin because even though flash has just about 99% market saturation people are loath to use flash because it requires a pluggin… anyway, it’s not about that 🙂 just a rant. What I’ve done in actionscript is to create a custom header that at runtime is the same as the column data. That is, if the data has a dropbox then the header has a dropbox that is a filter. I call it a QBE (query by example) enabled grid. I can’t see a grid column header object in ext but i thought I’d put the question out there? I agree with scott btw… I love finding great blogs as well.

    • Dasha Salo

      June 16, 2011 at 8:04 am

      Terry, where do you want that dropdown to appear? When you say header do you mean ExtJS Column Model or Grouping View?

  4. Fabrice Terrasson (@Fabrice1337)

    August 23, 2011 at 2:28 pm


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: