Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 26

Thread: Ext.grid.feature.Summary && Ext.grid.feature.Grouping

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

    Default

    Quote Originally Posted by samlinux View Post
    hi,
    can you post a complete example so that we can unterstand it, thanks
    Hi @samlinux,

    Can you specify who you're referring to by 'you' ?

    Regards,
    Yaron Yogev

    IT Software Developer

  2. #12
    Sencha User
    Join Date
    Sep 2010
    Location
    Austria
    Posts
    59
    Vote Rating
    2
      1  

    Default

    hi thanks for your response,

    i am looking for an example where a summary row is fixed to the bottom of the grid element. In Ext4 the summary is displayed only on the end of the grid, so you have to scroll to the end of the grid to see the summary, you know what I mean ?

  3. #13
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    20
    Vote Rating
    8
      3  

    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

  4. #14
    Ext Premium Member
    Join Date
    Mar 2007
    Location
    Norway
    Posts
    197
    Vote Rating
    5
      0  

    Default

    Works like a charm, Solovyek!
    Founder of the Path of Exticism

  5. #15
    Sencha User
    Join Date
    Nov 2010
    Posts
    27
    Vote Rating
    0
      0  

    Default BUG

    When grid is created, the total summary row is shown (when no group selected).
    If click on cell header, group by this field - total summary row shown.

    But when ungroup - total summary row disapear.

  6. #16
    Sencha User
    Join Date
    Oct 2012
    Posts
    6
    Vote Rating
    0
      0  

    Default

    This solution works for me. thanks.

    But the total row and subtotal rows are not like what you showed in the snapshot. I mean they are not bold...

    Is there any way to define the css style of total row and subtotal rows?


    Quote Originally Posted by Solovyevk View Post
    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;
      }
    });

  7. #17
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    20
    Vote Rating
    8
      1  

    Default

    Quote Originally Posted by guoal View Post
    This solution works for me. thanks.

    But the total row and subtotal rows are not like what you showed in the snapshot. I mean they are not bold...

    Is there any way to define the css style of total row and subtotal rows?

    You define it here:

    .x-grid-row-summary .x-grid-cell-inner {
    font-weight: bold;
    font-size: 11px;
    }

  8. #18
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default how to get grouped column value

    This works fine, thanks for sharing. I need small enhancement to this. I am grouping data in grid using a country column. For every country I am displaying total (see attached image) as "Total :<grouped value>". How can i get grouped column value next to Total? Something like "Total for CANADA : < grouped value>"
    Attached Images Attached Images

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

    Default

    Quote Originally Posted by rama.krishna View Post
    This works fine, thanks for sharing. I need small enhancement to this. I am grouping data in grid using a country column. For every country I am displaying total (see attached image) as "Total :<grouped value>". How can i get grouped column value next to Total? Something like "Total for CANADA : < grouped value>"
    Hi,

    You can override the renderSummary function.

    Yaron
    Yaron Yogev

    IT Software Developer

  10. #20
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Thanks for the reply. Can u give me a sample function? I tried to add rendrer but it only renders the data not summary. I wrote the summary renderer like this
    summaryRenderer: function(value, summaryData, dataIndex) {

    if(value == store.data.getCount())
    return 'Grand Total:';
    else
    return 'Total: ';

    }

    but summaryData has only the summary values nothing about data, and dataIndex is just the column name, and value is always blank...

Page 2 of 3 FirstFirst 123 LastLast

Posting Permissions

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