2

再次返回另一个 ExtJS 查询。我有一个带有 SummaryGroup 功能的网格，可以从面板标题上的工具按钮切换（启用/禁用）。启用一次正确显示它，禁用然后尝试启用该功能。分组发生了，但组的汇总总数不会再次出现？

JS小提琴在这里：http : //jsfiddle.net/hD4C4/1/

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

这是按下按钮一次的图片： 在此处输入图像描述

这是禁用它然后再次重新启用它之后的相同网格： 在此处输入图像描述

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

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

提前谢谢你:) 内森

4

1 回答 1

4

它看起来像错误。

我对代码进行了一些分析，发现这个问题是由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产生空的摘要记录。我没有更深入，所以现在我只能给你肮脏的黑客来覆盖它（它强制代码进入第一个分支）：

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

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

经过更多挖掘后，我发现最有可能发生此问题，因为调用group.generation时不会增加。populateRecord结果group.generation总是等于，因此只有在为空1时才会填充记录（第一次代码传递）。lastGeneration重新启用功能后，会创建新组，但它们也已generation设置为1.

所以我想出了不那么肮脏的黑客：

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/

于 2014-07-16T17:15:45.670 回答