Ext.grid.feature.Summary && Ext.grid.feature.Grouping

[yyogev]

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,

[samlinux]

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 ?

[Solovyevk]

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.

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;
  }
});

[bone]

Works like a charm, Solovyek!

[Diavololt]

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.

[guoal]

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?

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.

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;
  }
});

[Solovyevk]

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;
}