Extjs网格分组摘要单击事件

我正在使用Ext.grid.Panel和Ext.grid.feature.GroupingSummary。我需要为摘要行单击事件添加侦听器。是否存在任何汇总行单击事件

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

---

据我所知，没有任何内置功能可以做到这一点。您必须自己捕获summary元素上的click事件。这仍然相对容易。如果您需要知道已单击的摘要组，事情就会变得复杂

您可以使用特征的方法。为此，您需要保留对分组特性实例的引用，并且，最令人高兴的是，您必须找到与单击的摘要元素匹配的group header元素。为了使事情更加有趣，ext4.2中的group和summary元素的标记似乎发生了巨大的变化

下面是一个监听器的代码（在summary元素的click事件上），它完成了所有这些

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);
}

下面是一个完整的示例，基于文档中的分组摘要网格示例

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);
            }
        }
    }
});

---

这个答案的目的只是为了证明这些原则。您可能希望以更好的方式组织此代码。。。最干净的方法可能是扩展或覆盖

GroupingSummary

类。

对此有任何更新吗？你的问题解决了吗？你试过我的解决办法吗？