CC.grid.GridSummary

[CPliskin]

Hello!

I've needed a summary in grid that has no grouping.
So I've adjusted Ext.grid.GroupSummary to work with Ext.grid.GridView.
I'm using paging on grid so I don't need to calculate summary on client-side - I'm sending it from server as a command to my DictionaryController that controls filter & item forms and grid.

It works as grid plugin.

	this.grid = new Ext.grid.GridPanel({
		...
		plugins: new CC.grid.GridSummary(),
		...
	});

...and after receiving data from server you can post summary data to plugin:

	var q = Ext.DomQuery, ns = q.select('summary', doc), r = {data: []};
	for(var i = 0, len = ns.length; i < len; i++){
		var n = ns[i];
		r.data[q.selectValue("col", n)] = q.selectValue("val", n);
	}

	this.grid.summary.setData(r);
	this.grid.getView().refresh();

If you using JSON you can adjust source to get summary from store/reader as Ext.grid.GroupSummary does.

CC.grid.GridSummary = function(config){
	Ext.apply(this, config);
};

Ext.extend(CC.grid.GridSummary, Ext.util.Observable, {
	init : function(grid){
		this.grid = grid;
		this.cm = grid.getColumnModel();
		this.view = grid.getView();
		
		this.view.afterMethod('refresh', this.refresh, this);
		this.grid.summary = this;

		if(!this.rowTpl){
			this.rowTpl = new Ext.Template(
				'<div class="x-grid3-summary-row" style="{tstyle}">',
				'<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
					'<tbody><tr>{cells}</tr>',
				'</table></div>'
			);
			this.rowTpl.disableFormats = true;
		}
		this.rowTpl.compile();

		if(!this.cellTpl){
			this.cellTpl = new Ext.Template(
				'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
				'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>',
				"</td>"
			);
			this.cellTpl.disableFormats = true;
		}
		this.cellTpl.compile();
	},
	
	setData: function(o){
		this.data = o;
	},

	renderSummary : function(o){
		var cs = this.view.getColumnData();
		var o = this.data;
		var cfg = this.cm.config;

		var buf = [], c, p = {}, cf, last = cs.length-1;
		for(var i = 0, len = cs.length; i < len; i++){
			c = cs[i];
			cf = cfg[i];
			p.id = c.id;
			p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
			if (o.data[c.name] || cf.summaryRenderer){
				p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
			}else{
				p.value = '';
			}
			p.style = c.style;
			if(p.value == undefined || p.value === "") p.value = " ";
			buf[buf.length] = this.cellTpl.apply(p);
		}

		return this.rowTpl.apply({
			tstyle: 'width:'+this.view.getTotalWidth()+';',
			cells: buf.join('')
		});
	},

	refresh : function(o){
		if (this.data && this.grid.store.getCount() > 0)
			Ext.DomHelper.insertHtml('beforeEnd', this.view.mainBody.dom, this.renderSummary());
	}
});

[bhomass]

I took the sample app http://extjs.com/deploy/dev/examples/grid/totals.html

cut it down to a single project,
changed GroupingView to GridView, GroupSummary to your GridSummary, kept the plugins: summary, line intact. and

var summary = new Ext.ux.GridSummary(); 
	summary.setData({project:'Secret', estimate:100});

project and estimate are both legitimate field names. But no summary row shows up in the display. what else do I need to do to get GridView to show up?

[bhomass]

from what I could trace, the problem is refresh on GridSummary was never called. There was an event registered during init:

this.view.afterMethod('refresh', this.refresh, this);

I don't know why view was never refreshed, and therefore GridSummary.refresh not called. if someone knows something, please give a hint.

_______________________

I made some important progress, and got the refresh event and am able to load a summary row.

the problem is, I used dataStore.on('load', function(){
to do summary.setData(), and it happens behind the GridSummary.refresh(), (which resulted directly from Store.loadRecords(). which event is the setData() meant to work off of?

[CPliskin]

I'm using the following scheme:

My command handlers subscribed on Ext.Ajax's requestcomplete.
I'm sending data for grid and adding command to set grid summary data into the response.
Command handler executed BEFORE the grid's store getting loaded and it works for me.
In case when I receive just update summary command and there is no data for grid store to load I just call grid.refresh().

I'm thinking about calculations on client - and I'll update plugin on next week to support store based calculations.

[bhomass]

Thanks, worked by subscribing to Ext.Ajax.requestcomplete. However, a little worried that summary may pick up the wrong requestcomplete event. I don't know enough about Ext to know if there can be competing ajax requests simultaneously. I would feel more assured if this worked by datastore.on('load',

Greate little addition. In my opinion, much more useful than the GroupingSummary provided by sample app.

[bhomass]

the summary row is not being included when using autoheight. any thoughts on how to alter auto height so that it takes into account of the added summary row?