Summary feature doesn't work with TreePanel

[cojack]

REQUIRED INFORMATION




Ext version tested:

• Ext 4.2.1 rev aed16176e68b5e8aa1433452b12805c0ad913836

Browser versions tested against:

• Any

DOCTYPE tested against:

• Any

Description:

• Summary feature doesn't work with TreePanel, because TreeStore doesn't have model property

Steps to reproduce the problem:

• Create TreeModel
• Create TreeStore
• Create TreePanel
• Add ftype summary to the TreePanel

The result that was expected:

• Should works as in simple grid

The result that occurs instead:

• There is an exception in the console about creating object from nothing

Solution:

Ext.define('Ext.tree.feature.Summary', {
    extend: 'Ext.grid.feature.Summary',
    alias: 'feature.treesummary',
    createSummaryRecord: function(view) {
        var columns = view.headerCt.getVisibleGridColumns(),
            info = {
                records: view.store.getRange()
            },
            colCount = columns.length, i, column,
            summaryRecord = this.summaryRecord || (this.summaryRecord = new view.store.treeStore.model(null, view.id + '-summary-record'));


            summaryRecord.beginEdit();
            for(i = 0; i < colCount; ++i) {
                column = columns[i];
                if(!column.dataIndex) {
                    column.dataIndex = column.id;
                }
                if(this.remoteRoot) {
                    column.summaryType = 'remote';
                }
                summaryRecord.set(column.dataIndex, this.getSummary(view.store.treeStore, column.summaryType, column.dataIndex, info));
            }
            summaryRecord.endEdit(true);
            summaryRecord.commit(true);
            summaryRecord.isSummary = true;
            return summaryRecord;
    }
});

[evant]

The summary feature currently isn't intended to work with the tree.

[chdig]

Is there any chance this is a feature that will be added/there is a way to hack it together?

Having a treepanel with summary is a must-have for my projects, and is a huge limitation that it's not available. Would anyone know if it's in the pipeline?

[PK1234567890]

same issue with my project, we generally need to use summary feature in Ext.tree.Panel, it will be appreciated if Sencha supports it for new versions of ExtJs

[miroperez]

+1 We also used that feature under 4.1 Tree grids and would like to see it return as our customers are already accustom to it.

[miroperez]

This mostly worked for me under 4.2.2. Not as robust as the original code but it worked.
I created a copy of the original and worked backwards from there.

/**
 * @author mperez
 * mostly a copy of the feature.summary. 
 */
Ext.define('Innotas.view.whatif.grid.feature.Summary', {

    /* Begin Definitions */

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

    alias: 'feature.treesummary',

    /**
     * @cfg {String} dock
     * Configure `'top'` or `'bottom'` top create a fixed summary row either above or below the scrollable table.
     *
     */
    dock: undefined,

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

    panelBodyCls: Ext.baseCSSPrefix + 'summary-',
    
    scrollPadProperty: 'padding-right',

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

        me.callParent(arguments);

        me.view.addFooterFn(me.renderTFoot);

        grid.on({
            columnmove: me.onStoreUpdate,
            scope: me
        });

        // On change of data, we have to update the docked summary.
        view.mon(view.store, {
            update: me.onStoreUpdate,
            datachanged: me.onStoreUpdate,
            scope: me
        });
    },

    renderTFoot: function(values, out) {
        var view = values.view,
            me = view.findFeature('treesummary');
        if (me.showSummaryRow  && this.store.getCount() > 0) {
            out.push('<tfoot>');
            me.outputSummaryRecord(me.createSummaryRecord(view), values, out);
            out.push('</tfoot>');
        }
    },
    
    toggleSummaryRow: function(visible) {
        var me = this,
            bar = me.summaryBar;
            
        me.callParent(arguments);
        if (bar) {
            bar.setVisible(me.showSummaryRow);
            me.onViewScroll();
        }
    },
    
    vetoEvent: function(record, row, rowIndex, e) {
        return !e.getTarget(this.summaryRowSelector);
    },

    onViewScroll: function() {
        this.summaryBar.el.dom.scrollLeft = this.view.el.dom.scrollLeft;
    },

    createSummaryRecord: function(view) {
        var columns = view.headerCt.getVisibleGridColumns(),
            info = {
                records: view.store.getRange()
            },
            colCount = columns.length, i, column,
            //summaryRecord = this.summaryRecord || (this.summaryRecord = new view.store.treeStore.model(null, view.id + '-summary-record'));
            summaryRecord = this.summaryRecord || (this.summaryRecord = Ext.create(Ext.getClassName(view.store.treeStore.model), view.id + '-summary-record'));
        // Set the summary field values
        summaryRecord.beginEdit();
        for (i = 0; i < colCount; i++) {
            column = columns[i];

            // In summary records, if there's no dataIndex, then the value in regular rows must come from a renderer.
            // We set the data value in using the column ID.
            if (!column.dataIndex) {
                column.dataIndex = column.id;
            }

            summaryRecord.set(column.dataIndex, this.getSummary(view.store, column.summaryType, column.dataIndex, info));
        }
        summaryRecord.endEdit(true);
        // It's not dirty
        summaryRecord.commit(true);
        summaryRecord.isSummary = true;

        return summaryRecord;
    },

    onStoreUpdate: function() {
        var me = this,
            view = me.view,
            record = me.createSummaryRecord(view),
            newRowDom = view.createRowElement(record, -1),
            oldRowDom, partner,
            p;

        if (!view.rendered) {
            return;
        }
        
        // Summary row is inside the docked summaryBar Component
        if (me.dock) {
            oldRowDom = me.summaryBar.el.down('.' + me.summaryRowCls, true);
        }
        // Summary row is a regular row in a THEAD inside the View.
        // Downlinked through the summary record's ID'
        else {
            oldRowDom = me.view.getNode(record);
        }
        
        if (oldRowDom) {
            p = oldRowDom.parentNode;
            p.insertBefore(newRowDom, oldRowDom);
            p.removeChild(oldRowDom);

            partner = me.lockingPartner;
            // For locking grids...
            // Update summary on other side (unless we have been called from the other side)
            if (partner && partner.grid.rendered && !me.calledFromLockingPartner) {
                partner.calledFromLockingPartner = true;
                partner.onStoreUpdate();
                partner.calledFromLockingPartner = false;
            }
        }
        // If docked, the updated row will need sizing because it's outside the View
        if (me.dock) {
            me.onColumnHeaderLayout();
        }
    },

    // Synchronize column widths in the docked summary Component
    onColumnHeaderLayout: function() {
        var view = this.view,
            columns = view.headerCt.getVisibleGridColumns(),
            column,
            len = columns.length, i,
            summaryEl = this.summaryBar.el,
            el;

        for (i = 0; i < len; i++) {
            column = columns[i];
            el = summaryEl.down(view.getCellSelector(column));
            if (el) {
                if (column.hidden) {
                    el.setDisplayed(false);
                } else {
                    el.setDisplayed(true);
                    el.setWidth(column.width || (column.lastBox ? column.lastBox.width : 100));
                }
            }
        }
    }
});

[Somo]

Hi,

Is this implementation supposed to work using extjs 5.0?
Because I tried and is not working as I expected...

Regards,
Csaba

[rmkane]

This mostly worked for me under 4.2.2. Not as robust as the original code but it worked.
I created a copy of the original and worked backwards from there.

/**
 * @author mperez
 * mostly a copy of the feature.summary. 
 */
Ext.define('Innotas.view.whatif.grid.feature.Summary', {

    /* Begin Definitions */

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

    alias: 'feature.treesummary',

    /**
     * @cfg {String} dock
     * Configure `'top'` or `'bottom'` top create a fixed summary row either above or below the scrollable table.
     *
     */
    dock: undefined,

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

    panelBodyCls: Ext.baseCSSPrefix + 'summary-',
    
    scrollPadProperty: 'padding-right',

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

        me.callParent(arguments);

        me.view.addFooterFn(me.renderTFoot);

        grid.on({
            columnmove: me.onStoreUpdate,
            scope: me
        });

        // On change of data, we have to update the docked summary.
        view.mon(view.store, {
            update: me.onStoreUpdate,
            datachanged: me.onStoreUpdate,
            scope: me
        });
    },

    renderTFoot: function(values, out) {
        var view = values.view,
            me = view.findFeature('treesummary');
        if (me.showSummaryRow  && this.store.getCount() > 0) {
            out.push('<tfoot>');
            me.outputSummaryRecord(me.createSummaryRecord(view), values, out);
            out.push('</tfoot>');
        }
    },
    
    toggleSummaryRow: function(visible) {
        var me = this,
            bar = me.summaryBar;
            
        me.callParent(arguments);
        if (bar) {
            bar.setVisible(me.showSummaryRow);
            me.onViewScroll();
        }
    },
    
    vetoEvent: function(record, row, rowIndex, e) {
        return !e.getTarget(this.summaryRowSelector);
    },

    onViewScroll: function() {
        this.summaryBar.el.dom.scrollLeft = this.view.el.dom.scrollLeft;
    },

    createSummaryRecord: function(view) {
        var columns = view.headerCt.getVisibleGridColumns(),
            info = {
                records: view.store.getRange()
            },
            colCount = columns.length, i, column,
            //summaryRecord = this.summaryRecord || (this.summaryRecord = new view.store.treeStore.model(null, view.id + '-summary-record'));
            summaryRecord = this.summaryRecord || (this.summaryRecord = Ext.create(Ext.getClassName(view.store.treeStore.model), view.id + '-summary-record'));
        // Set the summary field values
        summaryRecord.beginEdit();
        for (i = 0; i < colCount; i++) {
            column = columns[i];

            // In summary records, if there's no dataIndex, then the value in regular rows must come from a renderer.
            // We set the data value in using the column ID.
            if (!column.dataIndex) {
                column.dataIndex = column.id;
            }

            summaryRecord.set(column.dataIndex, this.getSummary(view.store, column.summaryType, column.dataIndex, info));
        }
        summaryRecord.endEdit(true);
        // It's not dirty
        summaryRecord.commit(true);
        summaryRecord.isSummary = true;

        return summaryRecord;
    },

    onStoreUpdate: function() {
        var me = this,
            view = me.view,
            record = me.createSummaryRecord(view),
            newRowDom = view.createRowElement(record, -1),
            oldRowDom, partner,
            p;

        if (!view.rendered) {
            return;
        }
        
        // Summary row is inside the docked summaryBar Component
        if (me.dock) {
            oldRowDom = me.summaryBar.el.down('.' + me.summaryRowCls, true);
        }
        // Summary row is a regular row in a THEAD inside the View.
        // Downlinked through the summary record's ID'
        else {
            oldRowDom = me.view.getNode(record);
        }
        
        if (oldRowDom) {
            p = oldRowDom.parentNode;
            p.insertBefore(newRowDom, oldRowDom);
            p.removeChild(oldRowDom);

            partner = me.lockingPartner;
            // For locking grids...
            // Update summary on other side (unless we have been called from the other side)
            if (partner && partner.grid.rendered && !me.calledFromLockingPartner) {
                partner.calledFromLockingPartner = true;
                partner.onStoreUpdate();
                partner.calledFromLockingPartner = false;
            }
        }
        // If docked, the updated row will need sizing because it's outside the View
        if (me.dock) {
            me.onColumnHeaderLayout();
        }
    },

    // Synchronize column widths in the docked summary Component
    onColumnHeaderLayout: function() {
        var view = this.view,
            columns = view.headerCt.getVisibleGridColumns(),
            column,
            len = columns.length, i,
            summaryEl = this.summaryBar.el,
            el;

        for (i = 0; i < len; i++) {
            column = columns[i];
            el = summaryEl.down(view.getCellSelector(column));
            if (el) {
                if (column.hidden) {
                    el.setDisplayed(false);
                } else {
                    el.setDisplayed(true);
                    el.setWidth(column.width || (column.lastBox ? column.lastBox.width : 100));
                }
            }
        }
    }
});

I have created a diff of the code you wrote and the original file you started with.

Diff which shows 140 removals and 11 additions:

• https://www.diffchecker.com/lsnky0if

Here is the original file:

• http://docs.sencha.com/extjs/4.2.2/s...eature-Summary

I am currently in the process of doing this for ExtJS 6, so I will start with their Summary class and work from there. Hopefully it works out.