saas-platform/frontend/saas-web/ext/packages/ux/src/feature/MySummary.js

Ext.define('Ext.ux.feature.MySummary', {

    extend: 'Ext.grid.feature.Summary',

    alias: 'feature.mysummary',

    dock: 'bottom',

    dockedSummaryCls: Ext.baseCSSPrefix + 'docked-mysummary',

    showSummaryRow: true,

    init: function(grid) {
        var me = this,
            view = me.view,
            dock = me.dock,
            store = grid.getStore();

        me.grid = grid;
        
        me.callParent([
            grid
        ]);
        grid.headerCt.on({
            add: me.onStoreUpdate,
            afterlayout: me.onStoreUpdate,
            remove: me.onStoreUpdate,
            scope: me
        });
        grid.on({
            beforerender: function() {
                var tableCls = [
                        me.summaryTableCls
                    ];
                if (view.columnLines) {
                    tableCls[tableCls.length] = view.ownerCt.colLinesCls;
                }
                me.summaryBar = grid.addDocked({
                    childEls: ['innerCt', 'item'],
                    renderTpl: [
                        '<div id="{id}-innerCt" data-ref="innerCt" role="presentation">',
                            '{%this.renderContent(out,values)%}',
                        '</div>'
                    ],
                    tpl: [
                        '<table class="x-grid-row-mysummary">',
                            '<tbody>',
                                '<tr>',
                                    '<tpl for=".">',
                                    '<td class="x-grid-cell x-grid-td x-grid-cell-numbercolumn-1526 x-unselectable x-mysummary-item">',
                                        '<div class="x-grid-cell-inner x-mysummary-item-cell">{label}',
                                            '<tpl if="typeLabel">',
                                            '({typeLabel})',
                                            '</tpl>',
                                            ': {value}',
                                        '</div>',
                                    '</td>',
                                    '</tpl>',
                                '</tr>',
                            '</tbody>',
                        '</table>',
                    ],
                    data: me.getSummarys(),
                    height: 36,
                    scrollable: {
                        x: false,
                        y: false
                    },
                    hidden: !me.showSummaryRow,
                    itemId: 'mysummaryBar',
                    cls: [ me.dockedSummaryCls, me.dockedSummaryCls + '-' + dock ],
                    xtype: 'component',
                    dock: dock,
                    weight: 10000000
                })[0];
            },
            afterrender: function() {
                grid.getView().getScrollable().addPartner(me.summaryBar.getScrollable(), 'x');
                me.onStoreUpdate();
                me.columnSizer = me.summaryBar.el;
            },
            single: true
        });

        store.on('load', function( s, records, successful, operation, eOpts) {
            var _res = operation._response.responseJson,
            _calculateProperty = grid.calculateProperty,
            _rootProperty = grid.rootProperty;

            var _root = _calculateProperty.split('.')[0];
            eval('var ' + _root + ' = _res[_root];');
            try {
                var columns = grid.columns,
                summaryData = [],
                datas = [];
                try {
                    summaryData = eval(_calculateProperty);
                    datas = eval(_rootProperty);

                    if(!Ext.isArray(summaryData)) {
                        summaryData = [];
                    }
                    if(!Ext.isArray(datas)) {
                        datas = [];
                    }
                }catch(e) {
                    // don't care this...
                }
                Ext.Array.each(columns, function (c) {
                    var type = c._summaryType,
                        name = c.dataIndex;

                    var d = Ext.Array.findBy(summaryData, function (s) {
                        return s.hasOwnProperty(name);
                    })
                    if (type && d) {
                        if(typeof c.mySummaryRenderer == 'function') {
                            c.summaryValue = c.mySummaryRenderer(grid, c, datas);
                        }else if (type == 'count') {
                            c.summaryValue = Ext.util.Format.number(d[name], c.format || '0');
                        } else if (typeof c.summaryRenderer == 'function') {
                            c.summaryValue = c.summaryRenderer(d[name]);
                        } else if (typeof c.renderer == 'function') {
                            c.summaryValue = c.renderer(d[name]);
                        } else {
                            c.summaryValue = Ext.util.Format.number(d[name], c.format || '0.00');
                        }
                    } else if(type && !d) {
                        if(typeof c.mySummaryRenderer == 'function') {
                            c.summaryValue = c.mySummaryRenderer(grid, c, datas);
                        }else {
                            c.summaryValue = me.applySummaryValue(datas, c);
                        }
                    } else {
                        c.summaryValue = null;
                    }
                });
                return datas;
            } catch (e) {
                console.error(e);
                saas.util.BaseUtil.showErrorToast(e.message);
            }
        });

        me.bindStore(grid, store);
    },

    onStoreUpdate: function(store) {
        var me = this,
        summaryBar = me.summaryBar,
        newSummarys = me.getSummarys();

        summaryBar && summaryBar.update(newSummarys);
    },

    getSummarys: function() {
        var me = this,
        view = me.view,
        columns = view.headerCt.getGridColumns(),
        summarys = me.summarys;

        if(summarys && summarys.length > 0) {
            return me.updateSummarys();
        }else {
            return me.initSummarys();
        }
    },

    initSummarys: function() {
        var me = this,
        summarys = [],
        grid = me.grid,
        columns = grid.columns;

        var typeLabels = {
            sum: '合计',
            count: '计数',
            avg: '平均值',
            max: '最大值',
            min: '最小值'
        };

        Ext.Array.each(columns, function(c) {
            var summaryType =  c._summaryType || c.summaryType;

            if(!c.disableMySummary&&summaryType) {
                summarys.push({
                    name: c.dataIndex,
                    label: me.getSummaryLabel(c),
                    type: summaryType,
                    typeLabel: summaryType ? typeLabels[summaryType] : '',
                    value: me.getSummaryValue(c)
                });
            } 
        });

        grid.mysummarys = summarys;

        if(summarys.length == 0) {
            me.showSummaryRow = false;
        }else {
            me.showSummaryRow = true;
        }

        me.summarys = summarys;
        return summarys;
    },

    updateSummarys: function() {
        var me = this,
        grid = me.grid,
        columns = grid.columns,
        summarys = me.summarys;

        Ext.Array.each(summarys, function(s) {
            var col = Ext.Array.findBy(columns, function(c) {
                return c.dataIndex == s.name;
            });
            if(col) {
                s.value = me.getSummaryValue(col);
            }
        });
        return summarys;
    },

    getSummaryLabel: function(c) {
        var text = c.text,
        summaryLabel = c.summaryLabel;
        if(typeof summaryLabel === 'string') {
            return summaryLabel;
        }else if(typeof summaryLabel === 'function') {
            return summaryLabel(c, text);
        }else {
            return text;
        }
    },

    getSummaryValue: function(c) {
        var summaryValue = c.summaryValue || 0,
        summaryValueRender = c.summaryValueRender;
        if(typeof summaryValueRender === 'function') {
            return summaryValueRender(summaryValue);
        }else {
            return summaryValue;
        }
    },

    applySummaryValue: function(datas, c) {
        var dataIndex = c.dataIndex,
        type = c.summaryType,
        values = datas.map(function(d) {
            return d[c.dataIndex];
        }),
        sum = Ext.Array.sum(values);
        if (type == 'count') {
            return Ext.util.Format.number(values.length, '0');
        } else if (typeof c.summaryRenderer == 'function') {
            return c.summaryRenderer(sum);
        } else if (typeof c.renderer == 'function') {
            return c.renderer(sum);
        } else {
            return Ext.util.Format.number(sum, c.format || '0.00');
        }
    },

    afterHeaderCtLayout: function(headerCt) {
        // do nothing...
    },

});