javascript - 刷新/重新绘制网格时组摘要消失

Question

再次返回另一个 ExtJS 查询。我有一个带有 SummaryGroup 功能的网格，可以通过面板标题上的工具按钮切换(启用/禁用)。启用一次正确显示，禁用然后尝试启用该功能。进行了分组，但各组的 Summery 总数不会再次返回？

JS fiddle here:http://jsfiddle.net/hD4C4/1/

在 fiddle 中它会显示组总数然后如果您禁用并再次重新启用它们会消失吗？

这是按下按钮一次的图片:

这是禁用它然后再次重新启用它后的同一个网格:

下面是面板标题工具按钮上的切换代码:

 xtype: 'tool',
            type: 'expand',
            tooltip: 'Enable grouping',
            handler: function(e, target, panelHeader, tool){
                var serviceGridView = Ext.getCmp('serviceOverview').getView('groupingFeature'),
                    gridFeature = serviceGridView.getFeature('serviceOverviewGroupingFeature');
                if (tool.type == 'expand') {
                    gridFeature.enable();
                    tool.setType('collapse');
                    tool.setTooltip('Disable grouping');
                } else {
                    gridFeature.disable();
                    Ext.getCmp('serviceOverview').setLoading(false,false);
                    Ext.getCmp('serviceOverview').getStore().reload();
                    tool.setType('expand');
                    tool.setTooltip('Enable grouping');
                }
            }

这是我的网格代码(顶部有特征函数:

var groupingFeature = Ext.create('Ext.grid.feature.GroupingSummary', {
    groupHeaderTpl: Ext.create('Ext.XTemplate',
        '',
        '{name:this.formatName} ({rows.length})',
        {
            formatName: function(name) {
                return '<span style="color: #3892d3;">' + name.charAt(0).toUpperCase() + name.slice(1) + '</span>';
            }
        }
    ),
    hideGroupedHeader: false,
    startCollapsed: true,
    showSummaryRow: true,
    id: 'serviceOverviewGroupingFeature'
});

Ext.define('APP.view.core.grids.Serviceoverview', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.gridportlet',

    height: 'auto',
    id: 'serviceOverview',
    cls: 'productsGrid',
    viewConfig: {
        loadMask: true
    },

    features: [groupingFeature, {ftype: 'summary'}],

    initComponent: function(){

        var store = Ext.create('APP.store.Serviceoverview');

        Ext.apply(this, {
            height: this.height,
            store: store,
            stripeRows: true,
            columnLines: true,
            columns: [{
                id       :'service-product',
                text   : 'Product',
                flex: 1,
                sortable : true,
                dataIndex: 'PACKAGE',
                summaryType: function(records) {
                    if (typeof records[0] !== 'undefined') {
                        var myGroupName = records[0].get('LISTING');

                        if (this.isStore) {
                            return '<span style="font-weight: bold;">Total of all</span>';
                        }

                        return '<span style="font-weight: bold;">'+myGroupName.charAt(0).toUpperCase() + myGroupName.slice(1)+' Totals</span>';
                        //return '<span style="font-weight: bold;">Totals</span>';
                    }
                },
                renderer: function(value, metaData ,record) {
                    return value;
                }
            },{
                id       :'service-listing',
                text   : 'Listing',
                flex: 1,
                sortable : true,
                dataIndex: 'LISTING',
                renderer: function(value, metaData ,record){
                    return value.charAt(0).toUpperCase() + value.slice(1);
                }
            },{
                id       :'service-total',
                text   : 'Running Total',
                flex: 1,
                sortable : true,
                dataIndex: 'TOTAL',
                summaryType: function(values) {
                    var total=0.0;
                    Ext.Array.forEach(values, function (record){
                        if (record.data.TOTAL !== null) {
                            total += parseFloat(record.data.TOTAL);
                        }
                    });
                    return '<span style="font-weight: bold;">&pound;' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
                },
                renderer: function(value, metaData ,record){
                    if (value == null) {
                        return '&pound;0.00';
                    }
                    return '&pound;' + numeral(value).format('0,0.00');
                }
            },{
                id       :'service-total-paid',
                text   : 'Total Paid',
                flex: 1,
                sortable : true,
                dataIndex: 'TOTAL_PAID',
                summaryType: function(values) {
                    var total=0.0;
                    Ext.Array.forEach(values, function (record){
                        if (record.data.TOTAL_PAID !== null) {
                            total += parseFloat(record.data.TOTAL_PAID);
                        }
                    });
                    return '<span style="font-weight: bold;">&pound;' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
                },
                renderer: function(value, metaData ,record){
                    if (value == null) {
                        return '&pound;0.00';
                    }
                    return '&pound;' + numeral(value).format('0,0.00');
                }
            },{
                id       :'service-outstanding',
                text   : 'Outstanding',
                flex: 1,
                sortable : true,
                dataIndex: 'OUTSTANDING',
                summaryType: function(values) {
                    var total=0.0;
                    Ext.Array.forEach(values, function (record){
                        if (record.data.OUTSTANDING !== null) {
                            total += parseFloat(record.data.OUTSTANDING);
                        }
                    });
                    return '<span style="font-weight: bold;">&pound;' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
                },
                renderer: function(value, metaData ,record){
                    if (value == null) {
                        return '&pound;0.00';
                    }
                    return '&pound;' + numeral(value).format('0,0.00');
                }
            },{
                id       :'service-properties',
                text   : 'No. of Clients',
                flex: 1,
                sortable : true,
                 dataIndex: 'CLIENTS',
                summaryType: function(values) {
                    var total=0.0;
                    Ext.Array.forEach(values, function (record){
                        if (record.data.CLIENTS !== null) {
                            total += parseFloat(record.data.CLIENTS);
                        }
                    });
                    return '<span style="font-weight: bold;">' + total + '</span>';
                }
            },{
                id       :'service-average-total',
                text   : 'Av. Total',
                flex: 1,
                sortable : true,
                dataIndex: 'AVERAGE_TOTAL',
                summaryType: function(values) {
                    var total=0.0;
                    Ext.Array.forEach(values, function (record){
                        if (record.data.AVERAGE_TOTAL !== null) {
                            total += parseFloat(record.data.AVERAGE_TOTAL);
                        }
                    });
                    return '<span style="font-weight: bold;">&pound;' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
                },
                renderer: function(value, metaData ,record){
                    if (value == null) {
                        return '&pound;0.00';
                    }
                    return '&pound;' + numeral(value).format('0,0.00');
                }
            },{
                id       :'service-average-total-paid',
                text   : 'Av. Total Paid',
                flex: 1,
                sortable : true,
                dataIndex: 'AVERAGE_TOTAL_PAID',
                summaryType: function(values) {
                    var total=0.0;
                    Ext.Array.forEach(values, function (record){
                        if (record.data.AVERAGE_TOTAL_PAID !== null) {
                            total += parseFloat(record.data.AVERAGE_TOTAL_PAID);
                        }
                    });
                    return '<span style="font-weight: bold;">&pound;' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
                },
                renderer: function(value, metaData ,record){
                    if (value == null) {
                        return '&pound;0.00';
                    }
                    return '&pound;' + numeral(value).format('0,0.00');
                }
            },{
                id       :'service-average-outstanding',
                text   : 'Av. Outstanding',
                flex: 1,
                sortable : true,
                dataIndex: 'AVERAGE_OUTSTANDING',
                summaryType: function(values) {
                    var total=0.0;
                    Ext.Array.forEach(values, function (record){
                        if (record.data.AVERAGE_OUTSTANDING !== null) {
                            total += parseFloat(record.data.AVERAGE_OUTSTANDING);
                        }
                    });
                    return '<span style="font-weight: bold;">&pound;' + numeral(total.toFixed(2)).format('0,0.00') + '</span>';
                },
                renderer: function(value, metaData ,record){
                    if (value == null) {
                        return '&pound;0.00';
                    }
                    return '&pound;' + numeral(value).format('0,0.00');
                }
            }]
        });

        this.callParent(arguments);
    }
});

提前谢谢你:)弥敦道

Answer 1

看起来像 bug 。

我稍微分析了一下代码，发现这个问题是feature中的generateSummaryData方法引起的。在这个方法中你可以找到这段代码:

if (hasRemote || store.updating || groupInfo.lastGeneration !== group.generation) {
    record = me.populateRecord(group, groupInfo, remoteData);

    if (!lockingPartner || (me.view.ownerCt === me.view.ownerCt.ownerLockable.normalGrid)) {
        groupInfo.lastGeneration = group.generation;
    }
} else {
    record = me.getAggregateRecord(group);
}

当第一次渲染网格时，第一个分支对所有组执行，并在重新启用后 - 第二个分支。调用 getAggregateRecord 而不是 populateRecord 会产生空的摘要记录。我没有深入，所以现在我只能给你肮脏的 hack 来覆盖它(它强制代码进入第一个分支):

store.updating = true;
feature.enable();
store.updating = false;

JSfiddle:http://jsfiddle.net/P2e7s/6/

---

经过更多挖掘后，我发现很可能会出现此问题，因为调用 populateRecord 时 group.generation 不会递增。结果 group.generation 始终等于 1，因此仅当 lastGeneration 为空(第一次代码传递)时才会填充记录。重新启用功能后，将创建新组，但它们还将 generation 设置为 1。

所以我想出了一个不那么肮脏的 hack:

Ext.define('Ext.override.grid.feature.AbstractSummary', {
    override: 'Ext.grid.feature.GroupingSummary',
    populateRecord: function (group, groupInfo, remoteData) {
        ++group.generation;
        return this.callParent(arguments);
    }
});

有了这个覆盖，您可以简单地启用功能，它应该可以工作。

JSFiddle:http://jsfiddle.net/P2e7s/9/