Results 1 to 8 of 8

Thread: Grid groupingsummary and summary together

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-3523 in TBD.
  1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    17

    Default Grid groupingsummary and summary together

    I'd like a grouped grid, with subtotals, and (grand) totals at the bottom.

    If you take the Group Summary example (http://dev.sencha.com/deploy/ext-4.0...mary-grid.html) and adding the summary feature (from http://docs.sencha.com/ext-js/4-0/#/...eature.Summary by just adding { ftype: 'summary' } to the features in the javascript for that example (http://dev.sencha.com/deploy/ext-4.0...ummary-grid.js) it doubles up the summary lines.

    Adding a summary to the bottom of a grid shouldn't affect the grouping. Is there a way to get these grid features to play nice with eachother?

    grid-bug.jpg

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    Lecco, ITALY
    Posts
    5

    Default

    I have exactly the same problem. I can't use Summary and GroupingSummary together.
    Thank you.

  3. #3

  4. #4
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,295

    Default

    +1

    I think fixing it should include a new official Grid example showing it works. Usually, when there is no example of something, that doesn't work out of the box.

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    Lecco, ITALY
    Posts
    5

    Default Possible Workaround

    Now I use this workaround:
    Override the generateSummaryData method of Ext.grid.feature.GroupingSummary like this:

    Code:
    generateSummaryData: function(){
            //##### This is the piece of code of Ext.grid.feature.Summary
            var me_MUB = this,
                data_MUB = {},
                store_MUB = me_MUB.view.store,
                columns_MUB = me_MUB.view.headerCt.getColumnsForTpl(),
                i_MUB = 0,
                length_MUB = columns_MUB.length,
                fieldData_MUB,
                key_MUB,
                comp_MUB;
                
            for (i_MUB = 0, length_MUB = columns_MUB.length; i_MUB < length_MUB; ++i_MUB) {
                comp_MUB = Ext.getCmp(columns_MUB[i_MUB].id);
                data_MUB[i_MUB] = me_MUB.getSummary(store_MUB, comp_MUB.summaryType, comp_MUB.dataIndex, false);
                //alert(comp_MUB.id +"-"+data_MUB[comp_MUB.id]);
            }
            //##### End code Summary
            
            var me = this,
                data = {},
                remoteData = {},
                store = me.view.store,
                groupField = this.getGroupField(),
                reader = store.proxy.reader,
                groups = me.summaryGroups,
                columns = me.view.headerCt.getColumnsForTpl(),
                i,
                length,
                fieldData,
                root,
                key,
                comp;
                
            for (i = 0, length = groups.length; i < length; ++i) {
                data[groups[i].name] = {};
            }
            
        
            if (me.remoteRoot && reader.rawData) {
                
                root = reader.root;
                reader.root = me.remoteRoot;
                reader.buildExtractors(true);
                Ext.Array.each(reader.getRoot(reader.rawData), function(value) {
                     data[value[groupField]] = value;
                     data[value[groupField]]._remote = true;
                });
                
                reader.root = root;
                reader.buildExtractors(true);
            }
            
            for (i = 0, length = columns.length; i < length; ++i) {
                comp = Ext.getCmp(columns[i].id);
                fieldData = me.getSummary(store, comp.summaryType, comp.dataIndex, true);
                
                for (key in fieldData) {
                    if (fieldData.hasOwnProperty(key)) {
                        if (!data[key]._remote) {
                            //data[key][comp.dataIndex] = fieldData[key];
                            //### Print the partial / total
                            data[key][comp.dataIndex] = fieldData[key]+"/"+data_MUB[i];                      
                        }
                    }
                }
            }
            return data;
        }
    and use only the GroupingSummary feature in the grid.

    The result is this:
    Capture26-07-2011-11.33.30.jpg

  6. #6
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196

    Default

    Thanks! That did the trick.
    Yaron Yogev

    IT Software Developer

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    23

    Default

    I combined Ext.grid.feature.GroupingSummary with Ext.grid.feature.Summary to show grand total
    at the bottom. Not very elegant solution, but it works. See screen shot attached.

    Code:
    Ext.define('WFP.view.component.GroupingSummaryWithTotal', {
      extend: 'Ext.grid.feature.GroupingSummary',
      alias: 'feature.groupingsummarytotal',
      getTableFragments: function () {
        return {
          closeRows: this.closeRows
        };
      },
      closeRows: function () {
        return '</tpl>{[this.recursiveCall ? "" : this.printTotalRow()]}';
      },
      getFragmentTpl: function () {
        var me = this,
          fragments = me.callParent();
        me.totalData = this.generateTotalData();
        Ext.apply(fragments, {
          printTotalRow: Ext.bind(this.printTotalRow, this)
        });
        Ext.apply(fragments, {
          recurse: function (values, reference) {
            this.recursiveCall = true;
            var returnValue = this.apply(reference ? values[reference] : values);
            this.recursiveCall = false;
            return returnValue;
          }
        });
        return fragments;
      },
      printTotalRow: function () {
        var inner = this.view.getTableChunker().metaRowTpl.join(''),
          prefix = Ext.baseCSSPrefix;
        inner = inner.replace(prefix + 'grid-row', prefix + 'grid-row-summary');
        inner = inner.replace('{{id}}', '{gridSummaryValue}');
        inner = inner.replace(this.nestedIdRe, '{id$1}');
        inner = inner.replace('{[this.embedRowCls()]}', '{rowCls}');
        inner = inner.replace('{[this.embedRowAttr()]}', '{rowAttr}');
        inner = Ext.create('Ext.XTemplate', inner, {
          firstOrLastCls: Ext.view.TableChunker.firstOrLastCls
        });
        return inner.applyTemplate({
          columns: this.getTotalData()
        });
      },
      getTotalData: function () {
        var me = this,
          columns = me.view.headerCt.getColumnsForTpl(),
          i = 0,
          length = columns.length,
          data = [],
          active = me.totalData,
          column;
        for (; i < length; ++i) {
          column = columns[i];
          column.gridSummaryValue = this.getColumnValue(column, active);
          data.push(column);
        }
        return data;
      },
      generateTotalData: function () {
        var me = this,
          data = {},
          store = me.view.store,
          columns = me.view.headerCt.getColumnsForTpl(),
          i = 0,
          length = columns.length,
          fieldData,
          key,
          comp;
        for (i = 0, length = columns.length; i < length; ++i) {
          comp = Ext.getCmp(columns[i].id);
          data[comp.id] = me.getSummary(store, comp.summaryType, comp.dataIndex, false);
        }
        return data;
      }
    });
    Attached Images Attached Images

  8. #8
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72

    Default

    I can confirm that is still happening using SA and extjs from cachefly in a 4.1 ExtJS project.

    Also, If you enable the summary row by default it is not working and you have to tick and untick the box to display totals by default.

    After deselecting show in groups it works.

    The order in which you put the components in SA affects how it behaves.

    There is a post I put with a video and some code about this bug.

    Regards

    Quote Originally Posted by Gerrat View Post
    I'd like a grouped grid, with subtotals, and (grand) totals at the bottom.

    If you take the Group Summary example (http://dev.sencha.com/deploy/ext-4.0...mary-grid.html) and adding the summary feature (from http://docs.sencha.com/ext-js/4-0/#/...eature.Summary by just adding { ftype: 'summary' } to the features in the javascript for that example (http://dev.sencha.com/deploy/ext-4.0...ummary-grid.js) it doubles up the summary lines.

    Adding a summary to the bottom of a grid shouldn't affect the grouping. Is there a way to get these grid features to play nice with eachother?

    grid-bug.jpg

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •