extjs - Extjs 网格分组汇总点击事件

Question

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

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

Answer 1

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

您可以使用该getGroupName功能的方法。为此，您需要保留对分组功能实例的引用，并且令人高兴的是，您必须找到与单击的摘要元素匹配的组标题元素。更有趣的是，组和摘要元素的标记似乎在 Ext 4.2 中发生了巨大变化。

这是一个监听器的代码（在摘要元素的点击事件上），它完成了所有这些。

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类。