javascript - グリッドを更新/再描画するとグループ サマリーが消える

Question

別の ExtJS クエリに戻ります。パネル ヘッダーのツール ボタンから切り替え可能な (有効化/無効化された) SummaryGroup 機能を備えたグリッドがあります。一度有効にすると正しく表示され、無効にしてから機能を有効にしてみてください。グループ化は行われますが、グループの集計合計は再び表示されませんか?

JSフィドルはこちら：http://jsfiddle.net/hD4C4/1/

フィドルでは、グループの合計が表示されますが、無効にして再度有効にすると、それらは消えますか?

ボタンを 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);
    }
});

前もってありがとう:) ネイサン

Answer 1

バグのようです。

コードを少し分析したところ、この問題は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);
}

グリッドが最初にレンダリングされると、すべてのグループに対して最初のブランチが実行され、再有効化後に 2 番目のブランチが実行されます。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/