Extjs grid grouping summary click event

Question

I'm using Ext.grid.Panel with Ext.grid.feature.GroupingSummary. i need to add listener for summary row click event. Is there are any event for summary row click.

Ext.create('Ext.grid.Panel', {
features:[
          Ext.create('Ext.grid.feature.GroupingSummary',{
                     ftype: 'groupingsummary'
          })
],

Answer 1

As far as I can tell, there's nothing built-in to do that. You will have to catch the click event on the summary element yourself. That remains relatively easy. Things get complicated if you need to know the group of the summary that has been clicked...

You can use the getGroupName method of the feature. For that, you'll need to keep a reference to the grouping feature instance and, the joyful part, you'll have to find the group header element that matches the clicked summary element. To spice things up even a little more, the markup for group and summary elements seems to have changed drastically in Ext 4.2.

Here's the code of a listener (on the click event of summary element) which does all that.

function(e, target) {

    // Find group element (header), for the clicked summary
    var groupEl;

    if (Ext.getVersion().isLessThan('4.2')) {
        // Life used to be easy with everything being a row
        // in the table (actual rows, group headers, 
        // summary row)...
        groupEl = Ext.fly(target).prev('.x-grid-group-hd');
    } else {
        // But from Ext4.2, everything became complicated.
        // Group headers & summary row seem to be embedded 
        // in the next or previous regular row... Since I
        // haven't entirely understood the logic behind, I
        // cannot guarantee this will work with all possible
        // cases...
        var row = Ext.fly(target).up('.x-grid-row');
        while (row && !groupEl) {
            groupEl = row.down('.x-grid-group-hd');
            row = row.prev('.x-grid-row');
        }
    }

    // We can get the group name from the group element,
    // but we need a reference to the grouping feature 
    // instance...
    var groupName = groupingSummary.getGroupName(groupEl);

    // Here you are...
    console.log('Group clicked: ' + groupName);
}

And here's a complete example, based on the grouping summary grid example from the doc.

Ext.define('TestResult', {
    extend: 'Ext.data.Model',
    fields: ['student', 'subject', {
        name: 'mark',
        type: 'int'
    }]
});

var groupingSummary = Ext.create('Ext.grid.feature.GroupingSummary', {
    groupHeaderTpl: 'Subject: {name}',
    ftype: 'groupingsummary'
});

Ext.create('Ext.grid.Panel', {
    width: 200,
    height: 240,
    renderTo: document.body,
    features: [groupingSummary],
    store: {
        model: 'TestResult',
        groupField: 'subject',
        data: [{
            student: 'Student 1',
            subject: 'Math',
            mark: 84
        },{
            student: 'Student 1',
            subject: 'Science',
            mark: 72
        },{
            student: 'Student 2',
            subject: 'Math',
            mark: 96
        },{
            student: 'Student 2',
            subject: 'Science',
            mark: 68
        }]
    },
    columns: [{
        dataIndex: 'student',
        text: 'Name',
        summaryType: 'count',
        summaryRenderer: function(value){
            return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
        }
    }, {
        dataIndex: 'mark',
        text: 'Mark',
        summaryType: 'average'
    }]

    ,listeners: {
        click: {
            element: 'body'
            ,delegate: '.x-grid-row-summary'
            ,fn: function(e, target) {

                // Find group element (header), for the clicked summary
                var groupEl;

                if (Ext.getVersion().isLessThan('4.2')) {
                    // Life used to be easy with everything being a row
                    // in the table (actual rows, group headers, 
                    // summary row)...
                    groupEl = Ext.fly(target).prev('.x-grid-group-hd');
                } else {
                    // But from Ext4.2, everything became complicated.
                    // Group headers & summary row seem to be embedded 
                    // in the next or previous regular row... Since I
                    // haven't entirely understood the logic behind, I
                    // cannot guarantee this will work with all possible
                    // cases...
                    var row = Ext.fly(target).up('.x-grid-row');
                    while (row && !groupEl) {
                        groupEl = row.down('.x-grid-group-hd');
                        row = row.prev('.x-grid-row');
                    }
                }

                // We can get the group name from the group element,
                // but we need a reference to the grouping feature 
                // instance...
                var groupName = groupingSummary.getGroupName(groupEl);

                // Here you are...
                console.log('Group clicked: ' + groupName);
            }
        }
    }
});

The goal of this answer is just to demonstrate the principles. You may want to organize this code in a better way... The cleanest would probably be to extend or override the GroupingSummary class.