PDA

View Full Version : Grid Summary Plugin With Fixed Summary Row



Pages : [1] 2

tinker
20 Dec 2007, 1:42 AM
[ hijacked by @mystix -- pardon me ;) ]

for anyone who stumbles across this thread --
just fyi, the latest code can always be found in post #9.

kudos still goes to @tinker for coming up with the initial code.

--- mystix




Hi!

Some time back I found a "GroupSummary" plugin here and modified it to my need to have a table/grid level summary. I found another similar plugin here (http://extjs.com/forum/showthread.php?t=20802). but it does not seem to fix the summary row at the bottom. Since I had to fight a lot to get it working, thought just thought it my be helpful to make a post. :)



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

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

var v = this.view;

v.layout = this.layout.createDelegate(this);

v.afterMethod('refresh', this.refreshSummary, this);
v.afterMethod('refreshRow', this.refreshSummary, this);
v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
v.afterMethod('onUpdate', this.refreshSummary, this);
v.afterMethod('onRemove', this.refreshSummary, 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></tbody>',
'</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">{value}</div>',
"</td>"
);
this.cellTpl.disableFormats = true;
}
this.cellTpl.compile();
},

renderSummary : function(o, cs){
cs = cs || this.view.getColumnData();
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.style = c.style;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
if(cf.summaryType || cf.summaryRenderer){
p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
}else{
p.value = '';
}
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('')
});
},

calculate : function(rs, cs){
var data = {}, r, c, cfg = this.cm.config, cf;
for(var j = 0, jlen = rs.length; j < jlen; j++){
r = rs[j];
for(var i = 0, len = cs.length; i < len; i++){
c = cs[i];
cf = cfg[i];
if(cf && cf.summaryType){
data[c.name] = Ext.grid.GridSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
}
}
}
return data;
},

layout : function(){
if (!this.view.summary)
this.view.summary = Ext.DomHelper.insertAfter(this.view.mainBody.dom.parentNode, {tag:'div'}, true);

if(!this.view.mainBody){
return;
}
var g = this.grid;
var c = g.getGridEl(), cm = this.cm,
expandCol = g.autoExpandColumn,
gv = this.view;

var csize = c.getSize(true);
var vw = csize.width;

if(!vw || !csize.height){ // display: none?
return;
}

if(g.autoHeight){
this.view.scroller.dom.style.overflow = 'visible';
}else{
var smHeight = this.view.summary.getHeight();
var hdHeight = this.view.mainHd.getHeight();

this.view.el.setSize(csize.width, csize.height + smHeight);

var vh = csize.height - (hdHeight) - (smHeight);

this.view.scroller.setSize(vw, vh);
this.view.innerHd.style.width = (vw)+'px';
}
if(this.view.forceFit){
if(this.view.lastViewWidth != vw){
this.view.fitColumns(false, false);
this.view.lastViewWidth = vw;
}
}else {
this.view.autoExpand();
}
this.view.onLayout(vw, vh);
},

doWidth : function(col, w, tw){
var gs = this.view.getRows(), s;
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[2];
s.style.width = tw;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.width = w;
}
},

doAllWidths : function(ws, tw){
var gs = this.view.getRows(), s, cells, wlen = ws.length;
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[2];
s.style.width = tw;
s.firstChild.style.width = tw;
cells = s.firstChild.rows[0].childNodes;
for(var j = 0; j < wlen; j++){
cells[j].style.width = ws[j];
}
}
},

doHidden : function(col, hidden, tw){
var gs = this.view.getRows(), s, display = hidden ? 'none' : '';
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[2];
s.style.width = tw;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.display = display;
}
},

// Note: requires that all (or the first) record in the
// group share the same group value. Returns false if the group
// could not be found.
refreshSummary : function(){
var g = this.grid, cm = g.colModel, ds = g.store, stripe = g.stripeRows;
var colCount = cm.getColumnCount();

if(ds.getCount() < 1){
return "";
}

var cs = this.view.getColumnData();

var startRow = startRow || 0;
var endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;

// records to render
var rs = ds.getRange();

var buf = [];
var data = this.calculate(rs, cs);
buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');

this.view.summary.update(buf.join(''));
this.view.layout();
},

getSummaryNode : function(){
return this.view.summary
},

showSummaryMsg : function(groupValue, msg){
var gid = this.view.getGroupId(groupValue);
var node = this.getSummaryNode(gid);
if(node){
node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
}
}
});

Ext.grid.GridSummary.Calculations = {
'sum' : function(v, record, field){
return v + (record.data[field]||0);
},

'count' : function(v, record, field, data){
return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
},

'max' : function(v, record, field, data){
var v = record.data[field];
var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
return v > max ? (data[field+'max'] = v) : max;
},

'min' : function(v, record, field, data){
var v = record.data[field];
var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
return v < min ? (data[field+'min'] = v) : min;
},

'average' : function(v, record, field, data){
var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
return t === 0 ? 0 : t / c;
}
}

Ext.grid.HybridGridSummary = Ext.extend(Ext.grid.GridSummary, {
calculate : function(rs, cs){
var gcol = this.view.getGroupField();
var gvalue = rs[0].data[gcol];
var gdata = this.getSummaryData(gvalue);
return gdata || Ext.grid.HybridGridSummary.superclass.calculate.call(this, rs, cs);
},

updateSummaryData : function(groupValue, data, skipRefresh){
var json = this.grid.store.reader.jsonData;
if(!json.summaryData){
json.summaryData = {};
}
json.summaryData[groupValue] = data;
if(!skipRefresh){
this.refreshSummary(groupValue);
}
},

getSummaryData : function(groupValue){
var json = this.grid.store.reader.jsonData;
if(json && json.summaryData){
return json.summaryData[groupValue];
}
return null;
}
});

violinista
21 Dec 2007, 12:57 AM
It would be nice to have some screenshots attached? Or maybe a live example? Thanks.

soreport
26 Dec 2007, 5:09 PM
there's something wrong when you resize a column!

jared
10 Jan 2008, 10:48 AM
Examples for use would be nice too.

mwh154
11 Jan 2008, 8:19 AM
This looks and works almost perfectly thank you.

There are three problems and one feature that would make this summary perfect.

Resizing a header column does not change the positions of the summary row, this does work correctly in the other version that you acknowledge, however I much prefer the locked bottom position you have created.
My summary information only seems to join numbers together for example 10,000 + 15,500 + 14,500 displays as 10,00015,50014,500 rather than 40,000 - this is most likely a stupid error or misunderstanding on my part but a pointer would be excellent. [Fixed this myself (my own stupid error) - should have set the data type for each xml column]
When refreshing the contents of the grid the summary updates correctly using new information, however if the grid results are empty the summary shows the last set of summary information.
New feature - Could the summary hidden/shown as a setting in JS so it could optionally be shown using a button event etc.


Again - great work.

Malcolm

JasonOng
14 Jan 2008, 9:21 PM
Works great but I had to tweak the calculations in order for them to update properly



Ext.grid.GridSummary.Calculations = {
'sum' : function(v, record, field){
//originally: return v + (record.data[field]||0);
return parseFloat(v) + parseFloat(record.data[field]);
},
'average' : function(v, record, field, data){
var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
//originally: t === 0 ? 0 : t / c;
return t === 0 ? 0 : parseFloat(t) / parseFloat(c);
}
}

graveyardfashions
17 Jan 2008, 10:38 AM
It sounds like this is exactly what I want! But I'm not sure how to implement it.

Caveat: I'm a beginner, and I haven't been able to find an example of anyone using this within the forums.

I added it as a plugin in the form:


var grid_TargetData_tab1 = new Ext.grid.GridPanel({
ds: ds_TargetData_tab1,
cm: tab1_colModel,
height:'auto',
width:950,
anchor:'100% 100%',
title:'Scores by Component',
plugins: new Ext.grid.GridSummary(),
stripeRows: 'true'
});


And I specified a summaryType in the columnModel (though I wasn't sure if I needed to use it as a renderer):


var tab1_colModel = new Ext.grid.ColumnModel([
{id:'label', header: "PACE Components", width: 200, sortable: true, dataIndex: 'label'},
{header: "Weight", width: 100, sortable: true, dataIndex: 'Weight', summaryType: 'sum'},
{header: "Overall Score", width: 100, renderer: pctChange, sortable: true, dataIndex: 'Overall', summaryType: 'average'},
{header: "Initial Call", width: 100, renderer: pctChange, sortable: true, dataIndex: 'call1', summaryType: 'average'},
{header: "Secondary Call", width: 100, renderer: pctChange, sortable: true, dataIndex: 'call2', summaryType: 'average'},
{header: "NYC_NYJ Avg", width: 100, renderer: pctChange, sortable: true, dataIndex: 'group19', summaryType: 'average'},
{header: "East Avg", width: 100, renderer: pctChange, sortable: true, dataIndex: 'group17', summaryType: 'average'},
{header: "USA Avg", width: 100, renderer: pctChange, sortable: true, dataIndex: 'group15', summaryType: 'average'}
]);

What else do I need to do? Heck, am I even correct up to this point? All I know is that I'm getting no Firebug errors, and no summary row.

Thank you for any help you can give!

Best wishes,
Cat

graveyardfashions
17 Jan 2008, 2:28 PM
Ok, it seems my code above *is* making the summary line show up - IF I sort a column. When the page first loads, the summary row does not display. Once I sort a column, the grid re-renders and displays the summary row. I think I can work with the rendering to figure this out.

Another thing I already figured out: unless I set a height on my grid, the summary row moves down within the tab as I sort the grid. It's hard to describe, but it is as if it floats further and further down the tab.

So, tips for others:
* be sure to have a defined height on your grid
* if you don't see it at first, try sorting the grid or re-rendering it in some way
* add math.round() to the average function :)

mystix
18 Jan 2008, 5:45 AM
alritey, i needed to use this so i took the liberty of fixing the various bugs in this plugin.
i made the following changes:
namespaced the plugin to Ext.ux.grid.GridSummary
removed the unused HybridGridSummary
added a drop-in example (adapted from array-grid.js in \examples\grid)
added css styles (taken from summary.css found in \examples\grid)
added synchronised scrolling for the GridSummary row
fixed various copy-paste bugs (from the GroupSummary plugin) :-?
fixed other rendering bugsenjoy ;)

p.s. kudos to @tinker for an inspiring start =D>


Plugin js:


// see zip file


Required css:


/* see zip file */


[update 1]
added toggleSummary() method

[update 2]
updated example


[update 3]
fixed bug in refreshSummary when no records are in the Store


[update 4]
fixed toggleSummary bugs
updated example html (added more custom summary renderer examples)
overrode Ext.util.format.usMoney to fix $NaN.00 appearing in example when no Records exist


[update 5]
refresh GridSummary row when grid's store is updated


[update 6]
added css fix to enable scrolling in IE6 (thanks to @timotti)
fixed onLayout so it doesn't choke when height:'auto' (thanks to @thomasf)
fixed calculate so NaN doesn't appear when there are no Records in the Grid's Store (thanks to @rtconner)

[update 7]
fixed typo in calculate method


[update 8]
added {attr} to cellTpl config (thanks to @lukas.wappler)
fixed 2 tiny closure bugs (i think :) ) in the calculate and renderSummary methods
added summary row tooltips to the included example


[update 9]
fixed + refactored calculate method
added rowIndex to parameter list of methods in Ext.ux.grid.GridSummary.Calculations
refactored messy methods in Ext.ux.grid.GridSummary.Calculations
updated example


[update 10]
minor update -- scoped unintentional global variable "cells"

[update 11]

updated included example to demonstrate Record insertion
minor code cleanup

tinker
21 Jan 2008, 1:09 AM
hey all!

thanks a lot for your responses... i have been away quite a long time and havnt been able to respond to any queries! sorry about that!

i am happy that this post has helped and inspired many - have got more stuff in my mind that i wanna put here! and pretty soon!

thanks!

kenshin
21 Jan 2008, 5:27 AM
Great work! :)

Please, is possible to have a screenshot or a live demo?

mystix
21 Jan 2008, 5:44 AM
Please, is possible to have a screenshot or a live demo?


:-/:-?8-|

i've already included a drop-in example.

unzip the entire package into the official 2.0 download's examples/grid directory, open Ext.ux.grid.GridSummary.html in Firefox (via File > Open File), and off you go.

you don't even need to run a webserver for the example. what more do you need???

[edit]
as requested, here's a screenshot:

http://img251.imageshack.us/img251/649/gridsummarygt4.png

sintax.era
21 Jan 2008, 11:45 AM
thank god :D
hope this works... I had copied groupingview.js and added 'display:none' to the style line for the group header...then put everything in one group to use groupsummary.
Which worked...but a proper solution sounds a lot better :)

sintax.era
21 Jan 2008, 11:52 AM
hmm...
http://prestige.hopto.org/test.jpghttp://www.prestigeframeless.com/test.jpg
I still like this look more :)

mystix
21 Jan 2008, 5:46 PM
hmm...
http://prestige.hopto.org/test.jpghttp://www.prestigeframeless.com/test.jpg
I still like this look more :)

Q.E.D.
http://img341.imageshack.us/img341/6191/gridsummaryfiddleqw5.png

just fiddle with the CSS settings for the GridSummary row, do a forceFit on the GridPanel's viewConfig, and tweak your grid height a little. voila.

bloon
30 Jan 2008, 4:41 AM
This plugin really helpfull,
does the plugin can contains more than 2 summary row ?
let's say the tables like this:


<table border="1" width="100%" id="table1">
<tr>
<td>&nbsp;</td>
<td align="center">US$</td>
<td align="center">IDR</td>
</tr>
<tr>
<td>ITEM 1</td>
<td align="right">1000</td>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td>ITEM 2</td>
<td align="right">&nbsp;</td>
<td align="right">900</td>
</tr>
<tr>
<td>ITEM 3</td>
<td align="right">100</td>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td>TOTAL US$</td>
<td align="right">1100</td>
<td align="right">&nbsp;</td>
</tr>
<tr>
<td>TOTAL IDR</td>
<td align="right">&nbsp;</td>
<td align="right">900</td>
</tr>
</table>

Thanks for helps.

mystix
30 Jan 2008, 7:13 AM
This plugin really helpfull,
does the plugin can contains more than 2 summary row ?


nope. like the plugin name says, it's a single summary row.
you'll have to dig into the plugin code to add an arbitrary number of summary rows.

looking forward to your plugin ;)

hint: you'll need to fiddle with the refreshSummary() method. look for the portion which handles deletion / insertion of the summary row into the wrapper div.

franklt69
31 Jan 2008, 2:33 PM
Hi this plug in is very cool, save many time, doing a quick test, when the grid don't have data in column using sum appear $NaN and in column like


{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', summaryType: 'count', summaryRenderer: function(v, params, data) {
return ((v === 0 || v > 1) ? '(' + v +' Companies)' : '(1 Company)');
}},

appear 1 Company


regards
Frank

mystix
31 Jan 2008, 5:44 PM
@franklt69, i've fixed Ext.ux.grid.GridSummary.Calculations.Sum(), and changed the summaryRenderer to


summaryRenderer: function(v, params, data) {
return v? ((v === 0 || v > 1) ? '(' + v +' Companies)' : '(1 Company)') : '';
}

(also uploaded a new zip file containing all these changes)

let me know how it turns out for you.

franklt69
1 Feb 2008, 6:31 AM
mystix I download the zip and changed summaryRenderer and now with 0 record the count don't appear, this is ok but yet in the column summaryType: 'sum' appear $NaN.00, should be hide like other, a little detail is when you have several column in the grid with the summary if the grid have horizontal scroll you can watching a column for instance email column and in the summary appear $700.00 so maybe will be good to set in the summary something like Total: $700.00 a field label, what do you thing?

regards
Frank

mystix
1 Feb 2008, 8:16 AM
mystix I download the zip and changed summaryRenderer and now with 0 record the count don't appear, this is ok but yet in the column summaryType: 'sum' appear $NaN.00,

that $NaN.00 issue is caused by the built-in Ext.util.Format.usMoney() method, which always assumes valid numbers are passed in.

use this override to fix that issue


Ext.util.Format.usMoney = function(v) { // override Ext.util.usMoney
v = Ext.num(v, 0); // ensure v is a valid numeric value, otherwise use 0 as a base (fixes $NaN.00 appearing in summaryRow when no records exist)
v = (Math.round((v - 0) * 100)) / 100;
v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
v = String(v);
var ps = v.split('.');
var whole = ps[0];
var sub = ps[1] ? '.'+ ps[1] : '.00';
var r = /(\d+)(\d{3})/;
while (r.test(whole)) {
whole = whole.replace(r, '$1' + ',' + '$2');
}
v = whole + sub;
if (v.charAt(0) == '-') {
return '-$' + v.substr(1);
}
return "$" + v;
}




should be hide like other

this is easily achieved via a custom summaryRenderer (like the one i used to display the total no. of companies).



a little detail is when you have several column in the grid with the summary if the grid have horizontal scroll you can watching a column for instance email column and in the summary appear $700.00 so maybe will be good to set in the summary something like Total: $700.00 a field label, what do you thing?

this is also easily achieved via a custom summaryRenderer. i've updated the example above with an example for the "Change" column.

thanks for the feedback ;)

[edit]
fixed minor problem with toggleSummary

franklt69
1 Feb 2008, 8:17 AM
sorry mystix I am wrong about horizontal scrolling, it is working ok

regards
Frank

dado.cubo
4 Feb 2008, 8:10 AM
Ehm, sorry for my bad English, and also because it's the first time that I post with you.
I'm a beginner user of ExtJs and JavaScript.
Could you tell me if it's possible to use the Footer-Summary with a grid of examples\grid\totals.html?
How do I use it?
Thanks

juljupy
4 Feb 2008, 8:46 AM
Hi, i've saw the screenshots and this is what i need for my project but i don't get it work, i got this error in firebug console: Ext.ns is not a function and Ext.ux.grid.GridSummary is not a constructor. when i run this file Ext.ux.grid.GridSummary.html, i've already add the ext link for js files but i'm still getting those errors, what's happening with this?

:-?

juljupy
4 Feb 2008, 2:49 PM
Hi all, :D

I've already made it work, it's great!!
Thanks to you!!

mystix
4 Feb 2008, 5:42 PM
Hi all, :D

I've already made it work, it's great!!
Thanks to you!!

yay. =D>

mystix
4 Feb 2008, 5:49 PM
Ehm, sorry for my bad English, and also because it's the first time that I post with you.
I'm a beginner user of ExtJs and JavaScript.
Could you tell me if it's possible to use the Footer-Summary with a grid of examples\grid\totals.html?
How do I use it?
Thanks

i've already included an example on how to use the GridSummary plugin in Ext.ux.GridSummary.html.
(the totals.html example is an example on how to use the GroupSummary plugin with an EditorGridPanel -- i've not tested if these 2 plugins work well together, but i strongly doubt so owing to the purpose of either plugin.)

if you're new to ExtJS i'd suggest starting with a simple grid example (e.g. array-grid.html) before trying out the plugin examples. there are a couple of concepts you need to be familiar with (like the Store, DataProxy, DataReader, ColumnModel etc) before you dive into the grid examples.

you might also want to check out the Learn (http://extjs.com/learn/) section of the site to get up to speed with Ext 2.0 before diving into more complex components like the GridPanel / EditorGridPanel.

saJoshua
6 Feb 2008, 5:31 PM
So cool! Nice going tinker & mystix :>

I have used the plugin in a paging grid and it works beautifully.

At the moment, I'm parsing to the server and fetching 30 records at a time. I'm considering using the PagingMemoryProxy to save the round trip.

I would really like to know if there is any chance that the summary could be on the entire datastore, not just the portion being rendered? Also, would it be possible to only aggregate on the store being loaded?

Thanks for this.
Joshua

juljupy
7 Feb 2008, 2:03 PM
hi, thanks for that again, i got a question, how do i get the summary value to make another calculations with that value?

saJoshua
7 Feb 2008, 11:58 PM
first guess would be to use the custom summaryRenderer.

What exactly are you trying to do?

juljupy
8 Feb 2008, 5:49 AM
i wanna do this:

Get the 'sum' result value to make another calculation, i got a math formula where i need that value and that formula i define it into another function.

So how do i access to the 'sum' result value?

mystix
8 Feb 2008, 6:09 AM
i wanna do this:

Get the 'sum' result value to make another calculation, i got a math formula where i need that value and that formula i define it into another function.

So how do i access to the 'sum' result value?

as @SaJoshua has mentioned, you may manipulate the 'sum' value (or 'count' / 'max' / 'min' / 'average' values) via a custom summaryRenderer.

add the following function to the included example


function squareIt(v, params, data) {
return v? (Math.pow(v * 1000, 2) / Math.pow(1000, 2)) : '';
}


and add the following summaryRenderer to the column with the sum


{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', summaryType: 'sum', editor: new Ext.form.NumberField({allowDecimals: true}), summaryRenderer: squareIt},


the summaryRenderer method is always passed 3 params:

v - the value computed by the column's respective summaryType function
params - the cell params css, id, style and value
data - computed data for all cells in the summary row

mystix
8 Feb 2008, 6:19 AM
I would really like to know if there is any chance that the summary could be on the entire datastore, not just the portion being rendered? Also, would it be possible to only aggregate on the store being loaded?


the summary row already works on the entire store.

check out this portion of the plugin (in particular, note the portion in bold)


refreshSummary : function() {
var g = this.grid, ds = g.store;
var cs = this.view.getColumnData();
var rs = ds.getRange(); // get all records from the Store
....
...
}


i.e. if you're already pulling all required Records into your Store (in order to use the PagingMemoryProxy, for example), then the summary row will aggregate on the entire set of Records which are in the Store.

juljupy
8 Feb 2008, 7:06 AM
i understand what you tell but what i want is this:

i need the summaryRender value, so i define another function outside

function whatever(sumvalue) {
var x = sumvalue + anothervalue or math function;
return x;
}
where sumvalue is the summaryRender value passed to the function.

this function i use it just to assign the whatever function result maybe into a Field Text.

What i need is to pass the summaryRender value to the whatever function outside the gridpanel.

mystix
8 Feb 2008, 7:33 AM
What i need is to pass the summaryRender value to the whatever function outside the gridpanel.


:-/

well just go ahead and stuff whatever() into the summaryRenderer then


summaryRenderer: function(v, params, data) {
whatever(v);
return v;
}

juljupy
8 Feb 2008, 7:52 AM
thanks, it works it was so easy... :D

chrissturm
13 Feb 2008, 6:45 AM
Q.E.D.
http://img341.imageshack.us/img341/6191/gridsummaryfiddleqw5.png

just fiddle with the CSS settings for the GridSummary row, do a forceFit on the GridPanel's viewConfig, and tweak your grid height a little. voila.

Is there a way to do it without forceFit, and have a horizontal scrollbar below the summary line? Having the scrollbar between the grid and its summary can look confusing :)

mystix
13 Feb 2008, 7:02 AM
Is there a way to do it without forceFit,

the forceFit config auto-sizes the columns, not the grid height.



and have a horizontal scrollbar below the summary line?

a non-locked grid summary row you mean?
i.e. the grid summary row is always the last row in a grid, and scrolls along with the other grid rows?
not this plugin.

try searching for a 1.x plugin written by @rodiniz for the 1.x Ext.grid.Grid/EditorGrid.

[edit]
p.s. if it looks confusing, you could always jazz up the summary row via css (have a look at the css for this plugin)
i.e. give it a shade of gray, bold the values etc:
http://img404.imageshack.us/img404/7310/summaryrownj0.png

chrissturm
13 Feb 2008, 7:36 AM
the forceFit config auto-sizes the columns, not the grid height.


a non-locked grid summary row you mean?


Well, no :)

what i want is a *horizontal* scrollbar like in your initial example here:
http://img251.imageshack.us/img251/649/gridsummarygt4.png
but i want the scrollbar below the summary line.
(The scrollbar scrolls both the grid and the summary line, so its confusing when its between grid and summary line)

mystix
13 Feb 2008, 9:00 AM
Well, no :)

what i want is a *horizontal* scrollbar like in your initial example here:
but i want the scrollbar below the summary line.
(The scrollbar scrolls both the grid and the summary line, so its confusing when its between grid and summary line)
d'oh. insufficient I-|

well i guess it's possible if:

the plugin's syncSummaryScroll method is registered with the the summary container's scroll event instead of the GridPanel's
the summary container's height can be automagically increased/decreased to cater for the presence/absence of a horizontal scrollbar (plugin has to somehow detect if there's horizontal scrolling in the GridPanel)
again, the plugin somehow detects if there's horizontal scrolling in the GridPanel and removes the horizontal scrollbar (without also removing the vertical scrollbar) -- i think this may be achieved via css property overflow-x:hidden
the GridPanel's horizontal scroll is controlled by the summary row's horizontal scrollbar (if any)


i won't be able to work on this for quite a while (already using the plugin in production), so you're welcome to make the mod ;)

just holler here if you do decide to try your hand at it.

Rainher
26 Feb 2008, 8:40 AM
Hi all,
first of all, congratulations on this wonderful plug-in.
My only problem is that, on initial load of the data, the total isn't refreshed and stays at 0.
Furthermore, when editing an already populated grid (ie. starting values not at 0), the total starts counting from the new value.
What am I missing?
Many thanks in advance!


<?php
$this->load->helper('form');
?>
<div id="subtitle">
<h2>Area impresa - Modulo 1</h2>
<h3>B. Pesatura FCA</h3>
<div id="infoint">
Intervista: <?= $id; ?><br>
Azienda: <?= $DENOMINAZIONE_AZ; ?><br>
Tutor: <?= $tutor; ?>
</div>
</div>
<div>
<?=form_open('hitex/unofca/'.$id); ?>
<div class="destra"><input type="image" src="<?= base_url(); ?>img/avanti.gif" alt="Prosegui" onclick="return checkAndSend();"></div>
<input type="hidden" name="serval" id="serval" value="">
<?=form_close(); ?>
</div>
<div style="text-align: left;">
<div id="grid"></div>
</div>
<script>
<!--
var grid;
var summary;
Ext.BLANK_IMAGE_URL = '<?= base_url() ?>ext/resources/images/default/s.gif';
Ext.onReady(function(){

function totPesi(v, params, data)
{
return 'Totale: '+ v;
}

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '<?= base_url() ?>index.php/ajax/unofca/<?= $id; ?>',
method: 'post'
}),
reader: new Ext.data.JsonReader({
root: 'dati',
totalProperty: 'totale',
id: 'id'
}, [
{name: 'nome', mapping: 'nome'},
{name: 'categoria', mapping: 'categoria'},
{name: 'peso', mapping: 'peso'}
])
});
var cm = new Ext.grid.ColumnModel([
{
header: "Nome",
dataIndex: 'nome',
width: 220
},
{
header: "Categoria",
dataIndex: 'categoria',
width: 220
},
{
header: "Peso",
dataIndex: 'peso',
width: 70,
align: 'center',
summaryType: 'sum',
summaryRenderer: totPesi,
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
allowDecimals: false,
maxValue: 100
})
}
]);

summary = new Ext.ux.grid.GridSummary();

grid = new Ext.grid.EditorGridPanel({
store: ds,
cm: cm,
renderTo: 'grid',
width:600,
height:320,
title:'Pesi degli FCA',
frame:false,
clicksToEdit:1,
stripeRows: true,
plugins: [summary]
});

ds.load();
});

function checkAndSend()
{
var serie = "";
var pesotot = 0;
righe = grid.store.getRange();

for (i = 0; i < righe.length; i++) {
riga = righe[i];

if (riga.data.peso < 1) {
Ext.Msg.alert('Errore', 'Ciascun FCA deve avere un peso maggiore di 0');
return false;
}

serie += riga.id + '|' + riga.data.peso + '#';
pesotot += riga.data.peso;
}

if (pesotot == 100) {
hid = document.getElementById('serval');
hid.value = serie;
//return true;
} else {
Ext.Msg.alert('Errore', 'La somma dei pesi deve essere pari a 100');
return false;
}
}
//-->
</script>

americos
26 Feb 2008, 1:34 PM
Hi All,

The code works pretty nice, I have a question though... When you reconfigure the grid DS and columnModel with:
grid.reconfigure(dataStore, columnModel)

the summary does not update. Any clues how to accomplish this?

mystix
27 Feb 2008, 8:30 AM
Hi All,

The code works pretty nice, I have a question though... When you reconfigure the grid DS and columnModel with:

the summary does not update. Any clues how to accomplish this?

comment out this line


this.cm = grid.getColumnModel();


and change all instances of this.cm.config to


this.grid.getColumnModel().config


and let me know how that works out for you.

mystix
27 Feb 2008, 8:41 AM
@rainher, try the latest update and let me know how that works out for you.

(note: i only added listeners on the Store's add, remove and clear events 'cos i think those are uncaught by the GridView, but i could be wrong).

thomasf
28 Feb 2008, 9:36 AM
First. Congratulations on this Extension. It is exactly what i needed! But I was wondering why this feature is not a core feature of the powerful Ext grid?


I had a problem in IE7 when i set the grid to height: 'auto' in the config. I got a Runtime Error on line 2746 (debug version of Ext).

My grid:


var summary = new Ext.ux.grid.GridSummary();
// create the grid
var grid = new Ext.grid.GridPanel({
store : store,
cm : new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), {
header : this.hdrActivity,
width : 130,
dataIndex : 'activity',
sortable : true,
summaryType : 'count',
summaryRenderer : totalActivities
}, {
header : this.hdrHours,
width : 80,
dataIndex : 'hours',
sortable : true,
summaryType : 'sum',
align:'right'
}, {
header : this.hdrSum,
width : 80,
dataIndex : 'amount',
sortable : true,
renderer: moneyFormat,
align:'right',
summaryType : 'sum'
}]),
viewConfig : {
forceFit : true
},
renderTo : 'time-grid-activity',
iconCls : 'icon-grid',
plugins : summary,
stripeRows : true,
width : 350,
height : 'auto',
maxHeight : 500,
autoHeight : true,
collapsible : true,
animCollapse : false,
loadMask : true,
footer : true,
title : this.gridTitleActivity
});
To get this working (Quick&Dirty :D ) i changed the onLayout Function in the Ext.ux.grid.GridSummary:


onLayout : function(vw, vh) {
if ('number' !== Ext.type(vh)) {
return;
}
// note: this method is scoped to the GridView
if (!this.grid.getGridEl().hasClass('x-grid-hide-gridsummary')) {
// readjust gridview's height only if grid summary row is visible
this.scroller.setHeight(vh - this.summary.getHeight());
}
},
Hope this helps.

hongfu
28 Feb 2008, 7:13 PM
it really helps.
thanks.:)

sayanb
11 Mar 2008, 4:45 AM
Hi All,

Are there any examples of the grid summary? Screenshots would be nice too.

Also my organisation just got a team license with Gold support, and we are basing an entire slew of applications on Ext.

What are the additional resource that we could get our hands on?

Thanks
sayanb

mystix
11 Mar 2008, 5:20 AM
Hi All,

Are there any examples of the grid summary? Screenshots would be nice too.


they're all on the previous page - screenshots, and a zip containing the plugin code and a full drop-in example.

sayanb
11 Mar 2008, 7:42 AM
My grid has a too many columns . The summary plugin is of no use if I can not horizontally scroll on the summary. Is there a work around ?

Any response would be appreciated.

mystix
11 Mar 2008, 7:59 AM
My grid has a too many columns . The summary plugin is of no use if I can not horizontally scroll on the summary. Is there a work around ?

Any response would be appreciated.

:-? i don't know which plugin u're using, but the one i posted scrolls horizontally (as shown in the screenshot).

vertigoMX
11 Mar 2008, 8:04 AM
Same here... too many bloody columns

mystix
11 Mar 2008, 8:16 AM
Same here... too many bloody columns

might i suggest bandaid for the blood.

as for the excessive columns... doesn't the summary row scroll?

@sayanb & @vertigoMX, exactly which post did you copy the plugin code from?

sayanb
11 Mar 2008, 8:23 AM
The grid does scroll, but the Summary doesnt ... Even in your example the summary doesnt scroll along with the grid columns.

Am I missing something? Is there an live example of a Grid with the summary plugin, so that I can verify that if it is breaking in my deployment environment ?

mystix
11 Mar 2008, 8:33 AM
The grid does scroll, but the Summary doesnt ... Even in your example the summary doesnt scroll along with the grid columns.

Am I missing something? Is there an live example of a Grid with the summary plugin, so that I can verify that if it is breaking in my deployment environment ?

i just redownloaded my posted attachment to verify. the summary row scrolls (horizontally) along with the grid, as expected.

this is the direct download link to the attachment i posted:
http://extjs.com/forum/attachment.php?attachmentid=4872&d=1204130165

unzip that into the examples/grid folder from the official Ext download.
then access the Ext.ux.grid.GridSummary.html file to view the demo.

note that you need to run the examples off a webserver of some sort, or use @hendricd's override (found here (http://extjs.com/forum/showthread.php?t=10672&page=2))

[edit]
and here's a screencast of the example in action:
http://screencast.com/t/a7S6rdxfWD6

vertigoMX
11 Mar 2008, 2:25 PM
Yes! thanks Mistix, Im gonna try your code in a few minutes and post results. And yes, I got some band-aids for my bloody columns... :D

timotti
12 Mar 2008, 5:23 PM
Very nice plugin, but the summary doesn't scroll along with the grid columns in IE6. FF is ok!
Please help.

timotti
13 Mar 2008, 4:52 AM
fix for IE6:
change
.x-grid3-gridsummary-row-inner{overflow:hidden;}
to
.x-grid3-gridsummary-row-inner{overflow:hidden;width:100%;}
in Ext.ux.grid.GridSummary.css

vertigoMX
18 Mar 2008, 10:41 AM
Well the plugin works as expected, and its great, but before this, I had the groupSummary plugin, and I need both plugins together, but the configuration in the column model is the same, so I can't used them at the same time, eg. both need to have summaryType and summaryRenderer in the CM....

has anyone has this two great summaries in one single plugin?

cheers

vnug
20 Mar 2008, 2:31 AM
Has anyone gotten this plug-in to work under 1.1.x? Or, is this specific to 2.0? Thanks.

-vasu

mystix
20 Mar 2008, 4:51 AM
Has anyone gotten this plug-in to work under 1.1.x? Or, is this specific to 2.0? Thanks.

-vasu

it's specific to 2.x.

vnug
24 Mar 2008, 2:58 AM
Thanks, Mystix for the response. Follow-up questions - was anyone successful in porting this to 1.1? Or, any similar plug-in available for 1.1? Any and all information is appreciated.

best regards,

rtconner
4 Apr 2008, 3:24 PM
For those of you trying to get this (Mystix version) to work with group summary...

I don't know how fast or efficient this is, but it works. This easy 3 step proccess with get you there :)

1. Replace this..


this.view.afterMethod('syncScroll', this.syncSummaryScroll, this);
this.view.afterMethod('onColumnWidthUpdated', this.doWidth, this);
this.view.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
this.view.afterMethod('onColumnHiddenUpdated', this.doHidden, this);

with..



v.on('layout', this.setupUpdates, this);

2. then add fireEvent to onLayout...


onLayout : function(vw, vh) {
this.fireEvent('layout');
// note: this method is scoped to the GridView
if (!this.grid.getGridEl().hasClass('x-grid-hide-gridsummary')) {
// readjust gridview's height only if grid summary row is visible
this.scroller.setHeight(vh - this.summary.getHeight());
}
},

3. then add this method in to finish things up.


setupUpdates : function() {
this.refreshSummary();
this.view.afterMethod('syncScroll', this.syncSummaryScroll, this);
this.view.afterMethod('onColumnWidthUpdated', this.doWidth, this);
this.view.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
this.view.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
},

rtconner
4 Apr 2008, 3:39 PM
Oh and I was having a problem where I was getting NaN if there were no records. Just changed the calculate method to what is below to fix it.



calculate : function(rs, cs) {
var data = {}, r, c, cfg = this.cm.config, cf;
for (var i = 0, len = cs.length; i < len; i++) {
c = cs[i];
cf = cfg[i];
data[c.name] = 0;
for (var j = 0, jlen = rs.length; j < jlen; j++) {
r = rs[j];
if (cf && cf.summaryType) {
data[c.name] = Ext.grid.GridSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
}
}
}

return data;
},

Richie1985
9 Apr 2008, 7:43 AM
i use the sum row in a editor grid. the problem is, when i type something in a cell and then i go to the next cell with tab, or enter key, then the cell has no focus, without this plugin dos it function. how can fix it? but this os only in internet explorer, not in firefox :(

mystix
9 Apr 2008, 7:58 AM
i use the sum row in a editor grid. the problem is, when i type something in a cell and then i go to the next cell with tab, or enter key, then the cell has no focus, without this plugin dos it function. how can fix it? but this os only in internet explorer, not in firefox :(
:-/ huh???

Richie1985
9 Apr 2008, 8:18 AM
sorry, i come from germany and my english is very baaaaaaaaaaaadl.

i try to describe it better:

i use this Grid Summary Plugin in a Editor Grid.
Normaly i can click in a cell and write mit value. then i press the "enter" key and the cursur jump to the next cell. this runs without the plugin in alle browser (ie7, ie6, and firefox).

but with the plugin, in ie6 the grid lost the focus when i leave the cell.

did you understand me?

thanks

mystix
9 Apr 2008, 8:58 AM
@Richie1985, no worries. i don't speak a word of german :)

post your grid code, or a screencast (use Jing (www.jingproject.com) or something similar) and me / someone will take a look at it.
unfortunately, i don't have IE6 on hand, only IE7, so i'll have to start by inspecting your grid code.

[edit]
get the latest GridSummary update from my initial post.
i've updated the code to include fixes posted by various users.

crpatrick
15 Apr 2008, 1:54 PM
Please disreguard the below. I created only one instance of the summary plugin, and used on both grids. Wouldn't you know I saw that the minute I posted. :)

Thanks again for the plugin!

___________________________________________ Disreguard below this line....

Hi there-

First...great plugin!

I am seeing something a little weird with multiple grids on a page. I have a border layout, and the first grid with summary row renders in the center region. Once rendered, the user can resize/scroll, and the summary row resizes/scrolls as expected. When the user clicks on a row item, a second grid is built within the southern region, with another summary panel. The thing I am seeing though is that if a user resizes/scrolls the columns of the first grid, it resizes/scrolls the summary row columns of the second. Is there something that anyone can think of that may be tying the summary row of the second grid to the first/second displayed grids?

Thanks for any help.
Chris

mystix
15 Apr 2008, 10:36 PM
@crpatrick, you do know there's a strikethrough tag right?

doing


cows are cute

would give you


cows are cute


enjoy ;)

nuser
30 Apr 2008, 6:55 AM
as @SaJoshua has mentioned, you may manipulate the 'sum' value (or 'count' / 'max' / 'min' / 'average' values) via a custom summaryRenderer.

add the following function to the included example


function squareIt(v, params, data) {
return v? (Math.pow(v * 1000, 2) / Math.pow(1000, 2)) : '';
}


and add the following summaryRenderer to the column with the sum


{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', summaryType: 'sum', editor: new Ext.form.NumberField({allowDecimals: true}), summaryRenderer: squareIt},


the summaryRenderer method is always passed 3 params:

v - the value computed by the column's respective summaryType function
params - the cell params css, id, style and value
data - computed data for all cells in the summary row

I need the sum value of two columns to derive the average value for a third column e.g. average price = sum cost / sum qty.

I've been trying to figure out how to use the summaryRenderer to achieve this without success. Appreciate if someone could shed some light on how this could be done.

Tks & Best Rgds

saJoshua
30 Apr 2008, 11:18 PM
I need the sum value of two columns to derive the average value for a third column e.g. average price = sum cost / sum qty.

I've been trying to figure out how to use the summaryRenderer to achieve this without success. Appreciate if someone could shed some light on how this could be done.

Tks & Best Rgds


Hi,

I'm on a remote computer, so can't test this solution. I would think if average is calculated as follows:

sum(range)/count of range

your summaryRenderer could look something like the following:

function averageMyColumns(v, params, data) {
return (data.column1 && data.column2)? (data.column1 + data.column2) / 2 : '';
}

and in your third column definition, just call the averageMyColumns summaryRenderer.

Good luck,
Joshua

nuser
1 May 2008, 6:35 AM
Finally got it as follows:-

function avePrice(v, params, data) {
return data.data['Cost'] / data.data['Qty'];
}

nuser
1 May 2008, 6:49 AM
Now I am trying to get the grand total line. Where should I put the code?

mystix
1 May 2008, 6:50 AM
what grand total line?

nuser
1 May 2008, 6:56 AM
That's the final total i.e. summary total of all the record eg.

Group A
Rec1 100
Rec2 200
Summary Group A 300

Group B
Rec3 250
Rec4 150
Summary Group B 400

Grand total 700

Rgds

mystix
1 May 2008, 6:59 AM
eh? summary group??

you might be looking at the wrong plugin. this plugin only provides a summary row... :-?

[edit]
IIRC, someone in this thread has successfully combined the GroupSummary and GridSummary plugins...

nuser
1 May 2008, 7:13 AM
You're right. I am using the live group summary plugin in the sample app and was trying to solve the average price problem using the info from this post.

It's working well now except that I am trying to figure out how to get the grand total.

Rgds

mystix
1 May 2008, 7:16 AM
as i've mentioned one post up, somewhere in this thread someone managed to successfully combine both the GroupSummary plugin you mentioned, and the GridSummary plugin (which is what this thread is all about). The GridSummary plugin will give you that Grand Total row you're seeking.

just search back a few pages and you should be able to find the post.

[edit]
the zip download i provided includes a full drop-in example of how to use the GridSummary plugin to obtain a "total" row.
you might want to check that out:
http://www.extjs.com/forum/showthread.php?p=111221#post111221

nuser
1 May 2008, 7:27 AM
Read thru this post couple of times. Must have missed it.

Tks. Will look thru to find it.

mystix
1 May 2008, 7:38 AM
and what do you know, it's just a few posts up:
http://www.extjs.com/forum/showthread.php?p=148459#post148459

enjoy ;)

(p.s. the google forum search in the top right hand corner of this page might come in handy in future)

rums
6 May 2008, 9:43 AM
First off: Thank you for this fantastic plugin. Works like a charm in FF and Safari on Windows.

IE 6 however, is a different story. At first I thought it was my code but then I ran the included example and the same error occurs. The script error I'm receiving is the following:



Error Message: 'Ext.ux.grid.GridSummary' is null or not an object


Again, this is in the GridSummary example that came with the zip file (Ext.ux.grid.GridSummary.html) , and the line it refers to is:


var summary = new Ext.ux.grid.GridSummary();


Any thoughts? Has any one else experienced (or tested) this in IE on Windows?

Thanks!
Rums.

mystix
7 May 2008, 12:25 AM
odd... try emptying your IE cache?

rums
7 May 2008, 6:50 AM
Hi Mystix -- thanks for the reply. I had tried emptying my cache and have run the base example from a few different machines, all with the same result: FF & Safari good, IE bad.

Has *anyone* been able to get this running in IE?

mystix
7 May 2008, 7:17 AM
just tested this successfully in IE6 & IE7 using the Ext 2.1 download.

are you sure you're using the correct code i posted in post #9 of this thread?

rums
7 May 2008, 7:54 AM
Hi Mystix,

I rechecked the files from your post #9 and they were the same. I then put the ExtJS framework and your files onto another server and it worked fine in IE, as did my own pages. Finally, I went and simplified some of my directory structures on my server and lo-and-behold, it all works again (all I did was move the ext-2.1 directory from /scripts to the root and ran your sample page again with no further changes)

What still baffles me is that it worked without a single error in FF w/Firebug. If I find out any further information I'll post to this thread but in the meantime thank you very much for testing it out for me and replying.

Rums.

mystix
7 May 2008, 8:01 AM
gotta love hate IE. ;)

longfeisoft
10 May 2008, 9:59 PM
Thanks for your Grid Summary Plugin,that's very well!
But ,that's not my needed for my project,So,I'd changed it.
Now,your code that had modified by me can work to....
It's not Summary the grid data,the summary data is passed by my code.

that likes:

summary.setSumValue(Ext.decode("{'company':'Average','price':'1212.2','change':'1.23','pctChange':'123'}"));

the following is demo archive.

http://extjs.com/forum/attachment.php?attachmentid=6742&stc=1&d=1210485284

thanks again!

ps: nice to communicate with me.
my QQ:67231242,Msn:longfeisoft@hotmail.com,Gtalk:longfeisoft@gtalk.com

(my English is not well,sorry!)

Layne
14 May 2008, 3:18 PM
First off, thanks very much for this plugin! It works great!

This may be a stupid question, but is there an easy way to get the summary value it creates? (I want to use the value in a variable that I can post back to the server or use in calling another function).

mystix
14 May 2008, 7:09 PM
@layne,

posts #31 - #36 should solve your problem.

longfeisoft
16 May 2008, 11:17 AM
thanks for you like it!
right,i think that i got a easy way to get the summary value .
when init the grid,the data need download by Store object, but my josn data that responsed from server is not only include the grid data,but also has the summary data.It likes that:


{"rowcount":"2","items":[{"username":"longfei","salary":1000},":[{"username":"layne","salary":2000}],"summary":{"username":"total:","salary":3000}}

then,Your Store's proxy can add the following code:


success:function(a,b){
var s = a.responseText;
var j = Ext.decode(s);
if(j&&j.summary)
summary.setSumValue(j.suminfo);
}


My English is not good,did you can see?

eliezerreis
26 May 2008, 1:08 PM
For those of you trying to get this (Mystix version) to work with group summary...

I don't know how fast or efficient this is, but it works. This easy 3 step proccess with get you there :)

1. Replace this..


this.view.afterMethod('syncScroll', this.syncSummaryScroll, this);
this.view.afterMethod('onColumnWidthUpdated', this.doWidth, this);
this.view.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
this.view.afterMethod('onColumnHiddenUpdated', this.doHidden, this);

with..



v.on('layout', this.setupUpdates, this);

2. then add fireEvent to onLayout...


onLayout : function(vw, vh) {
this.fireEvent('layout');
// note: this method is scoped to the GridView
if (!this.grid.getGridEl().hasClass('x-grid-hide-gridsummary')) {
// readjust gridview's height only if grid summary row is visible
this.scroller.setHeight(vh - this.summary.getHeight());
}
},

3. then add this method in to finish things up.


setupUpdates : function() {
this.refreshSummary();
this.view.afterMethod('syncScroll', this.syncSummaryScroll, this);
this.view.afterMethod('onColumnWidthUpdated', this.doWidth, this);
this.view.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
this.view.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
},



This work fine, very nice example. But now I have one new feature to try do. The steps above give only the great total for a grid. Someone can help with some idea how to make both implements? Total for a group and total for a group.

If anyone can give me some light is very helpfull.

eliezerreis
28 May 2008, 7:10 AM
I did some upgrades in Ext.ux.grid.GridSummary plugin.
Now you can use it with Simple Grid and with Grouped Grid. If you use it with Group Grid you have summary for groups and for all grid (In the footer).

I put the sample with source code on http://www.snews.com.br/eliezer/gridsummary/
I dont know if is a better way to do this, but in my case worked fine. mystix you can see my code and look with you can use it on your plugin.

If anyone find some bug or make another upgrade, keep us informed!!

mystix
28 May 2008, 7:10 AM
@eliezerreis

try this:
http://www.extjs.com/forum/showthread.php?p=148459#post148459

YMMV

mystix
28 May 2008, 7:11 AM
oh wow... you replied right before i replied. :))

eliezerreis
28 May 2008, 7:16 AM
oh wow... you replied right before i replied. :))

That coincidence!!! /:) LoL
Better, now you can see my sample!


I TEST IT ONLY ON FIREFOX 2

mystix
28 May 2008, 7:19 AM
I TEST IT ONLY ON FIREFOX 2


i just tested it in FF2.0.0.14.
doesn't work for me -- the gridsummary row doesn't appear.

p.s. where's the groupsummary?

mscdex
28 May 2008, 7:19 AM
I put the sample with source code on http://www.snews.com.br/eliezer/gridsummary/
I dont know if is a better way to do this, but in my case worked fine.

The grid on this link doesn't seem to be working properly for me. In FF2 there's text on top of the grid on the right hand side, and in IE7 the text is not there. The text being the message, "Ext.grid.GridSummary Plugin Example, Note that the js is not minified so it is readable...." In either browser, no summary shows up for me unless I'm doing something wrong?

EDIT: lol Mystix beat me to it :P

eliezerreis
28 May 2008, 7:36 AM
Sorry. I forgot give some permissions on my linux Server and did some mistakes.
I test it again and work fine. I test on FF2.0.0.14, IE7.0.6000.16643 and Safari 3.1.1 and all work fine.
http://www.snews.com.br/eliezer/gridsummary/

Please try again and give some F5 command.

I will put source code on annex. If you want you can do download and read how I do.

mystix
28 May 2008, 7:44 AM
@eliezerreis, found 2 funky bugs in the demo:

gridsummary row's columns don't get resized when their respective column headers are resized (i hope this wasn't part of my gridsummary implementation.. B)). if the gridsummary row is toggled, the gridsummary row's columns are resized correctly.
in the first grid, do the following:

resize any column once
click in any cell
repeat step (b)

then watch as mayhem sets in ;)


[edit]
i should've mentioned i tested this in FF2.0.0.14

eliezerreis
28 May 2008, 8:14 AM
Yeah Yeah Yeah, funny bugs on layout. I'm too donkey.
I paid attention in the calculations and if the summary was being rendered and calculated correctly. I don't observe so much the layout of the grid. Well ... I will do so with a little more calm now. Any news I keep you informed in this thread. If you observe more bugs, tell too.

mystix
28 May 2008, 8:17 AM
Yeah Yeah Yeah, funny bugs on layout. I'm too donkey.
I paid attention in the calculations and if the summary was being rendered and calculated correctly. I don't observe so much the layout of the grid. Well ... I will do so with a little more calm now. Any news I keep you informed in this thread. If you observe more bugs, tell too.

;) great job thus far!

uygarpe
3 Jun 2008, 12:51 AM
Great plugin, works like a charm. Thanks :D

lukas.wappler
4 Jun 2008, 7:25 AM
Hello,

This plugin is great, it was very usefull for me.

But i need tooltips in the summary row. I've tried some things but nothing works:((, can anyone help:-/

Thanks for help!

Best Regards
Lukas

mystix
4 Jun 2008, 7:40 AM
@lukas, these might help:
http://extjs.com/forum/showthread.php?t=953
http://extjs.com/forum/showthread.php?t=31243

don't have time to work on this atm, so let us know how you fare if you make some progress :)

lukas.wappler
5 Jun 2008, 12:30 AM
Thank you for the fast reply.

These functions I’ve already tried and i got no success.

For the normal column it is no problem like this.


renderer: function (value,params,data)
{
params.attr='ext:qtip="my tooltip"';
return value;
}


but the summary renderer ignores the "attr" value.
No Tooltip appears when i hover over the summary row.



summaryRenderer: function (value,params,data)
{
params.attr='ext:qtip="my tooltip"';
return value;
}


So I need a tooltip especially for the summary row
I hope somebody can help me.

Best regards
Lukas

mystix
5 Jun 2008, 1:13 AM
@lukas, you're right -- the existing cellTpl seems to be missing the attribute bit.

try this cellTpl config for the GridSummary plugin:


var myGrid = new Ext.grid.GridPanel({
// snip unecessary code

plugins: [
new Ext.ux.grid.GridSummary({
cellTpl: Ext.apply(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>"
), {
disableFormats: true
})
})
]

// snip unecessary code
});

then try your summaryRenderer again and let me know how it works out for you.

[edit]
it was indeed the cellTpl config.
i've updated the code and posted a new zip package in post #9.
i've also fixed 2 for-loop closure bugs (i think), and added a gridsummaryrow tooltip to the included example.

lukas.wappler
6 Jun 2008, 1:59 AM
good work!

Thanks a lot, for the very fast replys.

kimosabi
9 Jun 2008, 6:15 PM
Guys,

After some playing around, I found that I had to make sure that the variable coming in from the data source that was being used in the summary calculations needed to be typecast into an integer or a float.

On line 171, you can see that if ext.num can't detect a string as a number (which was happening in my case) it returns 0.


return v + Ext.num(record.data[field], 0);


One possible solution is to change line 171 to



return v + Ext.num(record.data[field], parseFloat(record.data[field]));


But I think that this should actually be fixed in data source (ie PHP outputting JSON in my case). So no need to patch this excellent plugin, just thought it might help some people who have the same problem.

mystix
9 Jun 2008, 6:25 PM
what's the number value/string being returned by your PHP script?

[edit]
that Ext.num check is there only to guard against nulls / empty strings.
if your Record was setup correctly (i.e. specifying type: 'float' or type: 'int' in the Reader's config), then that little check there shouldn't be returning 0.

kimosabi
10 Jun 2008, 1:19 AM
what's the number value/string being returned by your PHP script?

[edit]
that Ext.num check is there only to guard against nulls / empty strings.
if your Record was setup correctly (i.e. specifying type: 'float' or type: 'int' in the Reader's config), then that little check there shouldn't be returning 0.

Right you are. Thanks for the heads up.

httpdotcom
13 Jun 2008, 7:09 AM
Maybe someone can shed some light on a custom summaryRenderer. I would appreciate it greatly.

column a: average score
column b: number of grades

I use the "sum" renderer for the summaryRow column b, and this works fine, however the "average" renderer included with GridSummary is only averaging the values in column a, which is slightly off from my true value.

ie. what I need is:


var total = 0 ;
var count = 0 ;
for all store rows {
total = total + ( column a * column b ) ;
count = count + column b ;
}
return (total / count).toNum(2) ;


Where I am lost is how to loop through the store (ie. the "for" loop above) in the renderer. Thanks for any assistance.

rums
13 Jun 2008, 7:35 AM
Hi Httpdotcom,

I used something similar to this:


for (var i = 0; i < DataStore.getCount(); i++) {
myRecord = DataStore.getAt(i);
total += myRecord.get('columnA') * myRecord.get('columnB');
count += myrecord.get('columnB');
}

Hope that helps!

httpdotcom
13 Jun 2008, 7:55 AM
Hi Httpdotcom,

I used something similar to this:


for (var i = 0; i < DataStore.getCount(); i++) {
myRecord = DataStore.getAt(i);
total += myRecord.get('columnA') * myRecord.get('columnB');
count += myrecord.get('columnB');
}

Hope that helps!

Thanks for the assist.


..., summaryRenderer: function( v, params, data ) {
var t = 0 ;
var c = 0 ;
for (var i = 0; i < cs.getCount(); i++) {
row = cs.getAt(i) ;
t += row.get("AVG") * row.get("CNT") ;
c += row.get("CNT") ;
}
return t === 0 ? 0 : ( t / c ).toFixed(2) ;
}

mystix
13 Jun 2008, 10:10 AM
@httpdotcom, i just refactored bits of the plugin so you should now be able to do


Ext.apply(Ext.ux.grid.GridSummary.Calculations, {
customaverage : function(v, record, colName, data, rowIdx) {
var o = data[colName] || {}, count = record.store.getCount();
o.total = Ext.num(o.total, 0) + record.get('columnA') * record.get('columnB');
o.count = Ext.num(o.total, 0) + record.get('columnB');
return rowIdx == count - 1 ? (o.total / o.count) : o;
}
});

and specify


summaryType: 'customaverage'

in your ColumnModel config, and you'd be on your way.

latest update is in post #9.

httpdotcom
13 Jun 2008, 10:43 AM
@httpdotcom, i just refactored bits of the plugin so you should now be able to do


Ext.apply(Ext.ux.grid.GridSummary.Calculations, {
customaverage : function(v, record, colName, data, rowIdx) {
var o = data[colName] || {}, count = record.store.getCount();
o.total = Ext.num(o.total, 0) + record.get('columnA') * record.get('columnB');
o.count = Ext.num(o.total, 0) + record.get('columnB');
return rowIdx == count - 1 ? (o.total / o.count) : o;
}
});

and specify


summaryType: 'customaverage'

in your ColumnModel config, and you'd be on your way.

latest update is in post #9.

Thanks for the update, however it isn't producing any information (no errors in Firebug either).

I switched back to the code I posted above, and my values are restored. If you want me to post anything, let me know, otherwise I will try to decipher things and see if I find anything.

mystix
13 Jun 2008, 10:49 AM
minor typo in the code i posted (correction in red):


Ext.apply(Ext.ux.grid.GridSummary.Calculations, {
customaverage : function(v, record, colName, data, rowIdx) {
var o = data[colName] || {}, count = record.store.getCount();
o.total = Ext.num(o.total, 0) + record.get('columnA') * record.get('columnB');
o.count = Ext.num(o.count, 0) + record.get('columnB');
return rowIdx == count - 1 ? (o.total / o.count) : o;
}
});


once corrected, it works fine for me.
try this drop-in example (requires updated code from post #9):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ext.ux.grid.GridSummary - Custom summaryType Example</title>

<link rel="stylesheet" href="../../resources/css/ext-all.css"/>
<link rel="stylesheet" href="Ext.ux.grid.GridSummary.css"/><!-- CSS required by Ext.ux.grid.GridSummary plugin -->

<script src="../../adapter/ext/ext-base.js"></script>
<script src="../../ext-all.js"></script>
<script src='Ext.ux.grid.GridSummary.js'></script><!-- Ext.ux.grid.GridSummary plugin -->

<script>
Ext.util.Format.usMoney = function(v) { // override Ext.util.usMoney
v = Ext.num(v, 0); // ensure v is a valid numeric value, otherwise use 0 as a base (fixes $NaN.00 appearing in summaryRow when no records exist)
v = (Math.round((v - 0) * 100)) / 100;
v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
v = String(v);
var ps = v.split('.');
var whole = ps[0];
var sub = ps[1] ? '.'+ ps[1] : '.00';
var r = /(\d+)(\d{3})/;
while (r.test(whole)) {
whole = whole.replace(r, '$1' + ',' + '$2');
}
v = whole + sub;
if (v.charAt(0) == '-') {
return '-$' + v.substr(1);
}
return "$" + v;
}

// define our customaverage calculation before using it
Ext.apply(Ext.ux.grid.GridSummary.Calculations, {
customaverage : function(v, record, colName, data, rowIdx) {
var o = data[colName] || {}, count = record.store.getCount();
o.total = Ext.num(o.total, 0) + record.get('qty') * record.get('price');
o.count = Ext.num(o.count, 0) + record.get('qty');
return rowIdx == count - 1 ? (o.total / o.count) : o;
}
});

Ext.onReady(function() {
Ext.QuickTips.init();

var myData = [
['3m Co',1,71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',2,29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',3,83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',4,52.55,0.01,0.02,'9/1 12:00am']
];

// custom renderer example
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// custom renderer example
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// custom summary renderer example
function totalCompanies(v, params, data) {
params.attr = 'ext:qtip="Total no. of companies"'; // summary column tooltip example
return v? ((v === 0 || v > 1) ? '(' + v +' Companies)' : '(1 Company)') : '';
}

// custom summary renderer example
function averageChange(v, params, data) {
params.attr = 'ext:qtip="Average % Change"'; // summary column tooltip example
return v? ('Average: ' + v) : '';
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'qty', type: 'int'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

var summary = new Ext.ux.grid.GridSummary();

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
renderTo: 'grid-example',
store: store,
columns: [
new Ext.grid.RowNumberer(),
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', summaryType: 'count', summaryRenderer: totalCompanies},
{header: "Qty", width: 75, sortable: true, dataIndex: 'qty', summaryType: 'customaverage', editor: new Ext.form.NumberField({allowDecimals: false})},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', summaryType: 'sum', editor: new Ext.form.NumberField({allowDecimals: true})},
{header: "Change", width: 100, sortable: true, renderer: change, dataIndex: 'change', summaryType: 'average', summaryRenderer: averageChange},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange', summaryType: 'max'},
// intentionally make "Last Updated" large (so horizontal scrolling takes place) to demonstrate scrolling GridSummary row
{header: "Last Updated", width: 300, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
plugins: [summary], // have the EditorGridPanel use the GridSummary plugin
stripeRows: true,
height:200,
width:600,
title:'Array Grid'
});

new Ext.Button({
renderTo: 'toggleSummary',
text: 'Toggle Summary',
handler: function(btn, e) {
summary.toggleSummary();
}
});
});
</script>
</head>
<body scroll="no"><!-- scroll="no" to remove IE's irritating scrollbar -->
<div id="grid-example"></div>
<br/>
<div id="toggleSummary"></div>
</body>
</html>

(note: Qty is the customaverage column)


http://img213.imageshack.us/img213/1431/200806140324hk7.png

httpdotcom
13 Jun 2008, 11:25 AM
ok...once I re-copied the code from post #9 and the custom renderer, everything worked great.

Thanks!

mystix
13 Jun 2008, 11:29 AM
just fyi, there's a zip attachment in post#9 that includes the js, css and an example html file. ;)

lychorojostone
17 Jun 2008, 7:25 AM
Hi Ext Community! I have a single question...

Is there a way to use the grid summary with a paging? In fact, the answer is "Yes"... but summary is calculated from the actual page and not for each.

Maybe the json result may include server's summary and then print it by this great plugin...
is there another idea???

Thanks!
Lisandro

mystix
17 Jun 2008, 7:30 AM
i would think it would make more sense to show the subtotal for any given page (if used in a paging grid) as opposed to showing the total, until the last page is reached and the total for the entire paging grid is then displayed. (this, unfortunately, isn't supported atm.)

thoughts?

lychorojostone
17 Jun 2008, 7:53 AM
i would think it would make more sense to show the subtotal for any given page (if used in a paging grid) as opposed to showing the total, until the last page is reached and the total for the entire paging grid is then displayed. (this, unfortunately, isn't supported atm.)

thoughts?

First of all... thanks for the answer!
You are rigth... maybe showing both: subtotals ( what the user is looking at ) and totals would make more sense...
Imagine a grid that shows losses and earnings ( with a lot of pages ). The end-user should see the total balance

thoughts?

Lisandro

mystix
17 Jun 2008, 8:01 AM
yep, that's exactly what i had in mind.

i have no need for that functionality atm, though it sounds like a fun side-project ;)

let us know if you decide to try your hand at it, and perhaps some of the folk here could chip in along the way.

[edit]
this should be somewhat simpler now, since i've recently refactored the code and added a rowIdx param to the calculation methods. ;)

mcouillard
3 Jul 2008, 8:16 AM
Lovely extension, thank you. Question: how to get the value of a summary cell? I've looked all through the summary object using Firebug - no luck. I also checked the Store - seems the Summary data isn't there.

Background: Summary in use on an EditorGrid. Most cells are editable, numeric. The summary values thus change on edit of main content cells. To "save and exit" the EditorGrid, I must check the right-most column's summary cell value and take action based on it's value.

Any ideas?

mystix
3 Jul 2008, 8:49 AM
@mcouillard: get a reference to the gridsummaryplugin, call gridsummaryplugin.getSummaryNode() and inspect the appropriate cell for the value you need.

httpdotcom
3 Jul 2008, 9:16 AM
exactly...First I assigned

var summary = new Ext.ux.grid.GridSummary() ;

and then, in my grid, I used

...plugins: [summary],...

so, I could reference summary.getSummaryNode().
mcouillard, try that and please post results.

mystix
3 Jul 2008, 10:05 AM
exactly...First I assigned

var summary = new Ext.ux.grid.GridSummary() ;

and then, in my grid, I used

...plugins: [summary],...

so, I could reference summary.getSummaryNode().
mcouillard, try that and please post results.

although it might be a good idea to somehow make the summary row data (or node for the matter) available to the grid...

i'll chew on this over the weekend.

mcouillard
3 Jul 2008, 10:15 AM
@mcouillard: get a reference to the gridsummaryplugin, call gridsummaryplugin.getSummaryNode() and inspect the appropriate cell for the value you need.

Solved. Thank you both, Mystix and httpdotcom!


...
var summary = new Ext.ux.grid.GridSummary();
...
plugins: [summary],
...
//get the DOM of the summary element, wrap in Ext Element, query the last TD, get the first array element and get the underlying text - no matter how nested
var rightMostSummaryCell= Ext.get(summary.getSummaryNode().dom).query('td:last')[0].getText();
Took me a bit longer than I thought to piece together the right methods, but that's mostly due to my inexperience with Ext JS in general. Though, and you may agree even more Mystix, it'd be nice to have the summary data stored in a more approachable place!

mondomon
22 Jul 2008, 7:38 AM
@eliezerreis, found 2 funky bugs in the demo:
gridsummary row's columns don't get resized when their respective column headers are resized (i hope this wasn't part of my gridsummary implementation.. B)). if the gridsummary row is toggled, the gridsummary row's columns are resized correctly.
[edit]
i should've mentioned i tested this in FF2.0.0.14

I want first thank those that help contribute to this plugin. I am using this with a group summary grid and wondering if is there a fix for this bug?

What function can I look into to get this to work.

mystix
22 Jul 2008, 7:49 AM
check the rest of the thread. someone else has already posted tips on successfully using both gridsummary and groupsummary plugins together.

mondomon
22 Jul 2008, 10:37 AM
check the rest of the thread. someone else has already posted tips on successfully using both gridsummary and groupsummary plugins together.

I have fixed the issue with the gridsummary row and groupsummary row not being resized correctly.

Just replace doWidth with this


doWidth : function(col, w, tw) {
var s = this.view.summary.dom, gs = this.view.getGroups(), r;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.width = w;
for (var i = 0, len = gs.length; i < len; i++) {
r = gs[i].childNodes[2];
r.style.width = tw;
r.firstChild.style.width = tw;
r.firstChild.rows[0].childNodes[col].style.width = w;
}
},
and replace doAllWidths with this


doAllWidths : function(ws, tw) {
var s = this.view.summary.dom, gs = this.view.getGroups(), r, cells, cellsgs, wlen = ws.length;
s.firstChild.style.width = tw;
cells = s.firstChild.rows[0].childNodes;
for (var i = 0, len = gs.length; i < len; i++) {
r = gs[i].childNodes[2];
r.style.width = tw;
r.firstChild.style.width = tw;
cellsgs = r.firstChild.rows[0].childNodes;

for (var j = 0; j < wlen; j++) {
cells[j].style.width = ws[j];
cellsgs[j].style.width = ws[j];
}
}
},

mystix
22 Jul 2008, 10:43 AM
=D> @mondomon -- good job on digging into the code.

haven't seen @eliezerreis around in a while though -- i take it you managed to get his example fully up and running? and the fixes are only relevant to that example?

mondomon
22 Jul 2008, 10:54 AM
=D> @mondomon -- good job on digging into the code.

haven't seen @eliezerreis around in a while though -- i take it you managed to get his example fully up and running? and the fixes are only relevant to that example?

That is correct. The code is running on Dev right now so no live example but
here is the entire updated Ext.ux.grid.GridSummary.js that I am using


Ext.namespace("Ext.ux.grid.GridSummary"); // namespace Ext.ux.grid.GridSummary
Ext.ux.grid.GridSummary = function(config){
Ext.apply(this, config);
};

Ext.extend(Ext.ux.grid.GridSummary, Ext.util.Observable, {
init: function(grid){
this.grid = grid;
this.cm = grid.getColumnModel();
this.view = grid.getView();
var v = this.view;

v.onLayout = this.onLayout; // override GridView's onLayout() method
v.doGroupEnd = this.doGroupEnd.createDelegate(this); //Calculate to each group

v.afterMethod('render', this.refreshSummary, this);
v.afterMethod('refresh', this.refreshSummary, this);


v.on('layout', this.setupUpdates, this); //Layout setup
//update summary row on store's add / remove / clear events
//When change row need upgrade group total and grid total
v.afterMethod('onUpdate', this.doUpdate, this);
v.afterMethod('onRemove', this.doRemove, this);

grid.store.on('add', this.doUpdate, this);
grid.store.on('remove', this.doUpdate, this);
grid.store.on('clear', this.doUpdate, this);

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

calculate : function(rs, cs) {
var data = {}, r, c, cfg = this.cm.config, cf;
for (var i = 0, len = cs.length; i < len; i++) {
c = cs[i];
cf = cfg[i];
data[c.name] = 0;
for (var j = 0, jlen = rs.length; j < jlen; j++) {
r = rs[j];
if (cf && cf.summaryType) {
data[c.name] = Ext.ux.grid.GridSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
}
}
}

return data;
},

onLayout: function(vw, vh){
this.fireEvent('layout');
if ('number' != Ext.type(vh)) { // prevent onLayout from choking when height:'auto'
return;
}
// note: this method is scoped to the GridView
if (!this.grid.getGridEl().hasClass('x-grid-hide-gridsummary')) {
// readjust gridview's height only if grid summary row is visible
this.scroller.setHeight(vh - this.summary.getHeight());
}
},

setupUpdates: function(){
this.refreshSummary();
this.view.afterMethod('syncScroll', this.syncSummaryScroll, this);
this.view.afterMethod('onColumnWidthUpdated', this.doWidth, this);
this.view.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
this.view.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
},

syncSummaryScroll: function(){
var mb = this.view.scroller.dom;
this.view.summaryWrap.dom.scrollLeft = mb.scrollLeft;
this.view.summaryWrap.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
},

doWidth : function(col, w, tw) {
var s = this.view.summary.dom, gs = this.view.getGroups(), r;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.width = w;
for (var i = 0, len = gs.length; i < len; i++) {
r = gs[i].childNodes[2];
r.style.width = tw;
r.firstChild.style.width = tw;
r.firstChild.rows[0].childNodes[col].style.width = w;
}
},

doAllWidths : function(ws, tw) {
var s = this.view.summary.dom, gs = this.view.getGroups(), r, cells, cellsgs, wlen = ws.length;
s.firstChild.style.width = tw;
cells = s.firstChild.rows[0].childNodes;
for (var i = 0, len = gs.length; i < len; i++) {
r = gs[i].childNodes[2];
r.style.width = tw;
r.firstChild.style.width = tw;
cellsgs = r.firstChild.rows[0].childNodes;

for (var j = 0; j < wlen; j++) {
cells[j].style.width = ws[j];
cellsgs[j].style.width = ws[j];
}
}
},

doHidden: function(col, hidden, tw){
var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';
for (var i = 0, len = gs.length; i < len; i++) {
s = gs[i].childNodes[2];
s.style.width = tw;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.display = display;
}
},

renderSummary: function(o, cs){
cs = cs || this.view.getColumnData();
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.style = c.style;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
if (cf.summaryType || cf.summaryRenderer) {
p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
}
else {
p.value = '';
}
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('')
});
},

refreshSummary: function(gid){
var g = this.grid, ds = g.store, data, rs = [];
var cs = this.view.getColumnData();

//Summary for group
if (gid) {
ds.each(function(r){
if (r._groupId == gid) {
rs[rs.length] = r;
}
});
data = this.calculate(rs, cs);

var markup = this.renderSummary({
data: data
}, cs);

var group = Ext.get(gid); //Maybe is faster if you use document.getElementById() method

var existing = this.getSummaryNode(gid);
if (existing) {
//group.removeChild(existing) //If use method document.getElementById.
group.dom.removeChild(existing);
}
Ext.DomHelper.append(group, markup);
}

//Summary for grid
rs = ds.getRange();
data = this.calculate(rs, cs);
var buf = this.renderSummary({
data: data
}, cs);

if (!this.view.summaryWrap) {
this.view.summaryWrap = Ext.DomHelper.insertAfter(this.view.scroller, {
tag: 'div',
cls: 'x-grid3-gridsummary-row-inner'
}, true);
}
else {
this.view.summary.remove();
}
this.view.summary = this.view.summaryWrap.insertHtml('afterbegin', buf, true);
},

toggleSummary: function(visible){ // true to display summary row
var el = this.grid.getGridEl();
if (el) {
if (visible === undefined) {
//For grid
visible = el.hasClass('x-grid-hide-gridsummary');
//For group
if(this.grid.view instanceof Ext.grid.GroupingView){
groupVisibility = el.hasClass('x-grid-hide-summary');
}
}
//For grid
el[visible ? 'removeClass' : 'addClass']('x-grid-hide-gridsummary');

//For group
if(this.grid.view instanceof Ext.grid.GroupingView){
el[groupVisibility ? 'removeClass' : 'addClass']('x-grid-hide-summary');
}

this.view.layout(); // readjust gridview height
}
},

doUpdate: function(ds, record){
this.refreshSummary(record._groupId);
},

doRemove: function(ds, record, index, isUpdate){
if (!isUpdate) {
this.refreshSummary(record._groupId);
}
},

doGroupEnd: function(buf, g, cs, ds, colCount){
var data = this.calculate(g.rs, cs);
buf.push('</div>', this.renderSummary({
data: data
}, cs), '</div>');
},

getSummaryNode: function(gid){
//Summary node of group
if (gid) {
var g = Ext.fly(gid, '_gsummary');
if (g) {
return g.down('.x-grid3-summary-row', true);
}
}
//Summary node of grid
return this.view.summary
}
});

Ext.ux.grid.GridSummary.Calculations = {
'sum': function(v, record, field){
return v + Ext.num(record.data[field], 0);
},

'count': function(v, record, field, data){
return data[field + 'count'] ? ++data[field + 'count'] : (data[field + 'count'] = 1);
},

'max': function(v, record, field, data){
var v = record.data[field];
var max = data[field + 'max'] === undefined ? (data[field + 'max'] = v) : data[field + 'max'];
return v > max ? (data[field + 'max'] = v) : max;
},

'min': function(v, record, field, data){
var v = record.data[field];
var min = data[field + 'min'] === undefined ? (data[field + 'min'] = v) : data[field + 'min'];
return v < min ? (data[field + 'min'] = v) : min;
},

'average': function(v, record, field, data){
var c = data[field + 'count'] ? ++data[field + 'count'] : (data[field + 'count'] = 1);
var t = (data[field + 'total'] = ((data[field + 'total'] || 0) + (record.data[field] || 0)));
return t === 0 ? 0 : t / c;
}
}

mystix
22 Jul 2008, 5:43 PM
looks like that's only going to work with the GroupSummary plugin.

seems a little dangerous to mix the code for that into the GridSummary plugin though, so you might want to note it's specific to your (and @eliezerreis') case.

also noticed you don't seem to be running on the latest gridsummary code. you might want to have a look at post #9 to see what's changed since you started on @eliezerreis' code.

CEBEP
23 Jul 2008, 4:18 AM
Hello, my English could be with errors, sorry, my Russian mother tongue, please help overcome these problems.
This code plug Ext.ux.grid.GridSummary severely slows down the browser:


calculate: function (rs, cs) (
var data = (), r, c, cfg = this.cm.config, cf;
for (var j = 0, jlen = rs.length; j <jlen; j + +) (
r = rs [j];
for (var i = 0, len = cs.length; i <len; i + +) (
c = cs [i];
cf = cfg [i];
if (cf & & cf.summaryType) (
data [c.name] = Ext.ux.grid.GridSummary.Calculations [cf.summaryType] (data [c.name] | | 0, r, c.name, data);
)
)
)

return data;
)

When downloading the grid-table in the Explorer when processing 187 row of the table following message appears:
-------------------------------------------------- -----------------------------
The script on this page slows down the Internet Explorer. In continuing implementation scenario computer can not respond. End scenario? --> Options answer "Yes" - "No".
-------------------------------------------------- -----------------------------

How to fix problems that must be taken not to appear this message?

The total amount of lines for which the calculation is performed 302.

mystix
23 Jul 2008, 4:48 AM
Hello, my English could be with errors, sorry, my Russian mother tongue, please help overcome these problems.
This code plug Ext.ux.grid.GridSummary severely slows down the browser:


calculate: function (rs, cs) (
var data = (), r, c, cfg = this.cm.config, cf;
for (var j = 0, jlen = rs.length; j <jlen; j + +) (
r = rs [j];
for (var i = 0, len = cs.length; i <len; i + +) (
c = cs [i];
cf = cfg [i];
if (cf & & cf.summaryType) (
data [c.name] = Ext.ux.grid.GridSummary.Calculations [cf.summaryType] (data [c.name] | | 0, r, c.name, data);
)
)
)

return data;
)
When downloading the grid-table in the Explorer when processing 187 row of the table following message appears:
-------------------------------------------------- -----------------------------
The script on this page slows down the Internet Explorer. In continuing implementation scenario computer can not respond. End scenario? --> Options answer "Yes" - "No".
-------------------------------------------------- -----------------------------

How to fix problems that must be taken not to appear this message?

The total amount of lines for which the calculation is performed 302.
how do you propose optimising calculate() when it has to process (187 rows x however many columns you have) in order to calculate a total value? it is, after all, browser dependent -- FF doesn't hang up like IE does (haven't tried it with 187 rows yet though...)

you could send the grid totals from the server, but you're on your own there. should you choose to go down this path, you need to have your server send the totals down in a format expected by the plugin, then modify the calculate() method to check for this server-sent data before forcing a store-wide calculation of the grid totals, and find a way to stuff your server-sent grid totals into the summary row.

is there a reason why you're sending down that much data anyway? a human user can only handle so much information...

vertigoMX
25 Jul 2008, 8:30 AM
Mystix: zip file in post#9 is invalid/corrupt. Could you please fix it?

regards

mystix
25 Jul 2008, 8:52 AM
Mystix: zip file in post#9 is invalid/corrupt. Could you please fix it?

regards

there's nothing wrong with it.
download it using Firefox instead.

m$ie has been crapping out on this forum's downloads for the past few months since the forum upgrade.

vertigoMX
25 Jul 2008, 9:33 AM
Oops... my bad. You were right, bloody IE is breaking it. Thanx


there's nothing wrong with it.
download it using Firefox instead.

m$ie has been crapping out on this forum's downloads for the past few months since the forum upgrade.

froamer
6 Aug 2008, 6:31 AM
Cool Plug-in -great work!

Here's a few things that could make it even more powerful:

1) Make summary types work on dates and strings so you can show earliest date, alphabetically last value, etc.

2) Fix horizontal scroll on IE7 - works ok in FF but the summary row stays static in IE7

3) Support more than one statistic for a column each on a new line in the summary column. Then you could have total, average, max and min for a column

4) Make calculate functions part of the config so you could define your own calculations

Just some ideas, I hope they help. Thanks again for the plug-in.

mystix
6 Aug 2008, 6:51 AM
Cool Plug-in -great work!

Here's a few things that could make it even more powerful:

1) Make summary types work on dates and strings so you can show earliest date, alphabetically last value, etc.

3) Support more than one statistic for a column each on a new line in the summary column. Then you could have total, average, max and min for a column

hmmm.. good suggestion... i'll tinker with this when i've got some time. should be trivial.



2) Fix horizontal scroll on IE7 - works ok in FF but the summary row stays static in IE7

odd. are you using the code from post #9?
the IE6/7 horizontal scroll issue was reported here and subsequently fixed:


[update 6]
* added css fix to enable scrolling in IE6 (thanks to @timotti)








4) Make calculate functions part of the config so you could define your own calculations

you can define your own calculations already:
http://extjs.com/forum/showthread.php?p=181763#post181763
or do you have something else in mind?

froamer
6 Aug 2008, 7:49 AM
hmmm.. good suggestion... i'll tinker with this when i've got some time. should be trivial.Great!


odd. are you using the code from post #9?
the IE6/7 horizontal scroll issue was reported here and subsequently fixed:
Yes, freshly downloaded today. I see this in IE7 not IE6 as mentioned in update 6 - I don't know if that makes a difference.


you can define your own calculations already:
http://extjs.com/forum/showthread.ph...763#post181763
or do you have something else in mind?
Nope, that post escaped me (long day) thanks very much for the link!

mystix
6 Aug 2008, 8:07 AM
Yes, freshly downloaded today. I see this in IE7 not IE6 as mentioned in update 6 - I don't know if that makes a difference.

hmmm... if you've included the css it should work for IE in general... try playing with different overflow settings for the


.x-grid3-gridsummary-row-inner

css rule ('auto' perhaps?)

i don't have IE7 setup so i can't really help with this. :(
are there any IE7 users using this plugin who can chime in?

froamer
6 Aug 2008, 8:50 AM
I had a play with different overflow settings but didn't get it working. I shall continue to play and if I find anything I will post here.

Thanks for your help mystix.

Shmitt
7 Aug 2008, 9:52 PM
Great plugins here in this thread.

But still, can't find a plugin which support both summary, for groups and also for grid too.

The mystix plugin support only for grid, then the modified plugin from post 34, page 7 is for a groupingStore, but its shows the grid summary too, without the summarys for each group in part.

So did anybody confrunt this problem, and find a solution for that ?!

It will be great to post the plugin here.

Thx in advance !

mystix
7 Aug 2008, 10:10 PM
post #62 didn't work for you?
http://www.extjs.com/forum/showthread.php?p=148459#post148459

Shmitt
7 Aug 2008, 11:10 PM
I tryed it, and it seems that he show us only the summary for entire grid like in you plugin mystix, the difference is that you can work with GroupingStore, and group some fields, but it dosen't calculate the summary for each group like in totals.js example:

http://extjs.com/deploy/dev/examples/grid/totals.html


So what i need is to calculate the summary for each group and also for at the end of grid a summary row for entire group.

Is there any solution for this one?!

Thx in advance.

P.S. Thx for you answer mystix

mystix
7 Aug 2008, 11:51 PM
i've never used both together unfortunately.

maybe one of the thousands of users who've viewed this thread can chime in?

Shmitt
7 Aug 2008, 11:58 PM
Ok, hope too.

Also i wanna ask how to specifie the type of my summary field?!

Here is an example:


{
header: 'Numărul de<br> normo-schimburi',
dataIndex: 'nr_norma_de_schimb',
width: 50,
align: 'right',
sortable: false,
groupable: false,
renderer: function(v, params, record){
return (record.data.volum_de_lucru / record.data.norma_de_schimb);
},
summaryType:'totalCostNrNormaSchimburi',
summaryRenderer: Ext.util.Format.float ???
}

sow i made a div of 2 fields and the result is with comma and manyy cifres after the comma, and i wanna to be only 2 cifres after the comma(this refering the first line red)

Also about the summaryRenderer, i wanna specifie it, too, a number type, like float, how can i do this ?!?!?!

Searched on api and forums, without hhelpfull results.

Some clues will be great!

mystix
8 Aug 2008, 12:51 AM
create a new Format


Ext.apply(Ext.util.Format, {
cifres2: function(v) {
return Ext.num(v, 0).toFixed(2).toString().replace(/\./, ',');
}
});


and use it as the summaryRenderer:


summaryRenderer: Ext.util.Format.cifres2


[edit]
or kill 2 birds with 1 stone:
run the result of the renderer config through Ext.util.Format.cifres2, and do not specify a summaryRenderer at all:


renderer: function(v, params, record){
return Ext.util.Format.cifres2(record.data.volum_de_lucru / record.data.norma_de_schimb);
},

the plugin will automatically use the column renderer for the summary row also.

Shmitt
8 Aug 2008, 3:28 AM
Thx for the tips.

All works fine !

lukas.wappler
8 Aug 2008, 5:48 AM
Hallo,
there is something wrong with the 'sum' Type.

I have an Editor Grid.
For example my summary value for one column is 20.
When I change a value in this column from 5 to 2, the summary value is 15 instead 17.

I hope the bug is easy to fix.
Thank for your help!

Best Regars
Lukas

mystix
8 Aug 2008, 8:26 AM
Hallo,
there is something wrong with the 'sum' Type.

I have an Editor Grid.
For example my summary value for one column is 20.
When I change a value in this column from 5 to 2, the summary value is 15 instead 17.

I hope the bug is easy to fix.
Thank for your help!

Best Regars
Lukas

i've looked into my magic 8 ball, and based on your invisible code, the answer is...

http://img174.imageshack.us/img174/9318/magic8ballsu7.png

Shmitt
10 Aug 2008, 7:22 AM
Hello again!

I have a grid with summary using the mystix version: Ex.ux.grid.GridSummary

In my grid i have some columns and at the end of the grid i have a 'Total' column where i multiplicate some other columns from the same grid.
And at the bottom of grid are the summary for my columns, all works fine till the total column, where the summary value is always 0.
So here is my code for calculate the 'Total' value for one row:


function TotalChimie(v, params, data) {
params.attr = 'ext:qtip="Total"'; // summary column tooltip example
return v? (data.nr_repetari_consumabile * data.cantitatea_consumata * data.pret_unitate_chimicat) : '';
}where the red words are the fields with which i calculate the 'Total' field(column)

And here is the code from columnModule, for the 'Total' field:


{
header: "Total",
dataIndex: 'TotalConsumChimieApa',
width: 100,
align: 'right',
sortable: false,
renderer: function(v, params, record){
return (record.data.nr_repetari_consumabile * record.data.cantitatea_consumata * record.data.pret_unitate_chimicat);
},
summaryType:'sum',
summaryRenderer: TotalChimie
}


So the values for 'Total' column are calculated like it shoud be, but the summary this values it dosen't calculated :|

What seems to be the problem.

Any clues will be greatfull!

mystix
10 Aug 2008, 8:00 AM
Your total column as you've set it up only displays a value calculated from the columns you've specified, but does not contain any actual values at all -- this explains why the summary for total column is a grand total of zero.

you have two options. either

keep your existing Record definition and create a custom summary calculation for the total column, or
use @condor's CalculatedField plugin to give the total column an actual value which is calculated from thw fields you've specified.

Shmitt
10 Aug 2008, 11:05 AM
Thx for the tips mystix.

Choosed the first variant with a custom reader.

Having some problems here:

Need only to calculate the sumarry of 3 multiplicated columns. So this is the code:


Ext.apply(Ext.ux.grid.GridSummary.Calculations, {
customTotal : function(v, record, colName, data, rowIdx) {
var o = data[colName] || {}, count = record.store.getCount();
o.total = Ext.num(o.total, 0) + record.get('ColumnA') * record.get('ColumnB') * record.get('ColumnC');
return o.total;
}
});


What seems to be wrong ? The result is still 0.

srry for the dummy question

mystix
10 Aug 2008, 5:38 PM
i'm guessing you either missed this:


summaryType: 'customTotal'


or any of your column types for ColumnA, ColumnB or ColumnC are wrong (type:'string' instead of type:'float' or type:'int')

or any of the fields ColumnA, ColumnB or ColumnC don't exist in your Record definition.
(aren't they supposed to be nr_repetari_consumabile, cantitatea_consumata and pret_unitate_chimicat?)

if it isn't any of the above, i will need to see your code.

Shmitt
10 Aug 2008, 10:27 PM
Thx for replay mystix.

I've done all that you told me befory posting the first replay about that custom summary, But here is some code:

first the code for custom summary function, which is writed in my js file right after my Ext.data.Store:


Ext.apply(Ext.ux.grid.GridSummary.Calculations, {
customTotal : function(v, record, colName, data, rowIdx) {
var o = data[colName] || {}, count = record.store.getCount();
o.total = Ext.num(o.total, 0) + record.get('nr_repetari_consumabile') * record.get('cantitatea_consumata') * record.get('pret_unitate_chimicat');
return o.total;
}
});
And of course I put the summaryType in the column module:


{
header: "Total",
dataIndex: 'TotalConsumChimieApa',
width: 100,
align: 'right',
sortable: false,
renderer: function(v, params, record){
return (record.data.nr_repetari_consumabile * record.data.cantitatea_consumata * record.data.pret_unitate_chimicat);
},
summaryType:'customTotal'
}
Also my fields type are: int, float, float for the red ones.

So what seems to be the problem?! :-/

mystix
10 Aug 2008, 10:56 PM
why is the total column being bound to


dataIndex: 'TotalConsumChimieApa'

?

nevermind. scratch that. you need the binding.
let me think some more.

Shmitt
10 Aug 2008, 11:07 PM
Cause i mapping the 'TotalConsumChimie' in the datastore:

{name: 'TotalConsumChimie', type: 'float', mapping: 'TotalConsumChimie'}

Evidently the 'TotalConsumChimie' field, dosen't exist in my database, and i think i can erase that row from Ext.data.Store, and do not indicate the 'index' in columnmodule, i'll try it right now, and see how will work, but with Ext.grid.GroupSummary, from the Ext examples, all worked fine even if i had an index in columnModule.

Shmitt
10 Aug 2008, 11:28 PM
So the problem is in the function customTotal, cause i show in console the value of o.total and it's showing me, for 4 rows something like this:


42
Undefined
60
Undefined
where the numbers are the calculated value of coolumnA*columnB*columnC, but it dosen't calculate for all values, see the 'Undefined'.

And i don't need for all calculated values, i need the sum of calculated values. So obvisualy the function is wrong.

Try to fix it :|, but any help will be greatly apreciated

mystix
10 Aug 2008, 11:29 PM
because you specified a renderer, and left out the summaryRenderer, the renderer function was used to format the display for the summary row, resulting in a grand total of zero for the summary row.

simply add a summaryRenderer which returns the summary value


summaryRenderer: function(v) {
return v;
}


p.s. your customTotal function may be simplified to


Ext.apply(Ext.ux.grid.GridSummary.Calculations, {
customTotal : function(v, record, colName, data, rowIdx) {
var t = record.get('nr_repetari_consumabile') * record.get('cantitatea_consumata') * record.get('pret_unitate_chimicat');
return data[colName] + Ext.num(t, 0);
}
});

Shmitt
10 Aug 2008, 11:40 PM
Thx for help mystix.

All works fine now.

10x again!

Shmitt
11 Aug 2008, 1:43 AM
One little question:

How i can format the 'customTotal' value ?

it's a float and the returned value have a lot of cifres after comma. Need to have only 2 cifres.

P.S. the


Ext.apply(Ext.util.Format, {
cifres2: function(v) {
return Ext.num(v, 0).toFixed(2).toString().replace(/\./, ',');
}
});

works good for the columns values but for the summary nope.

mystix
11 Aug 2008, 2:04 AM
a couple of posts ago, we defined a new Format (remember??):


Ext.apply(Ext.util.Format, {
cifres2: function(v) {
return Ext.num(v, 0).toFixed(2).toString().replace(/\./, ',');
}
});


just set the summaryRenderer to that:


summaryRenderer: Ext.util.Format.cifres2

Shmitt
11 Aug 2008, 2:48 AM
Yea yea, tryed it but how can i specify the format if i had this in SummaryRenderer:


summaryRenderer: function(v){
return v;
}:-/

mystix
11 Aug 2008, 8:37 AM
read my previous post. again. carefully.

Eisstern
15 Aug 2008, 1:24 AM
Hi there,

I'm new to ExtJS and I got thrown into a big existing project. I downloaded your sources right before from post #9. I included the Ext.ux.grid.GridSummary.js and its css right after ext-all.js.
We use a function in StatTable.js to create our grid. Inside this function I wanted to add your GridSummary:

On the page:


...
<script type="text/javascript" src="../public/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../public/ext/ext-all.js"></script>
<script type="text/javascript" src="../public/js/Ext.ux.grid.GridSummary.js"></script>
<script type="text/javascript" src="../public/js/StatTable.js"></script>
...
In StatTable.js:


function StatTableExtJsCreate (dataControllerNum, totalRowsXMLPath, sourceNum, TableHeight, ColMapping, ColDev){
...
var summary = new Ext.ux.grid.GridSummary();
...
}
But now Firebug states this:
"Ext.ux.grid is undefined" at "var summary = new Ext.ux.grid.GridSummary();".

Is it a problem of namespace visibility? I absolutely have no clue whats wrong.

mystix
15 Aug 2008, 1:30 AM
odd. that shouldn't be happening.

place the following at the top of the StatTableExtJsCreate() function:


console.log(Ext.ux, Ext.ux.grid);

and see what that reports.

other than that, code looks fine.
i'll need to see some more code if you need further help.

[edit]
p.s. you are using the latest code from post #9 right?
the Ext.ns right at the top of the plugin file should've setup the namespaces already.

Eisstern
15 Aug 2008, 1:45 AM
Thanks for your concern.
Now I placed your debugging code in front of StatTableExtJsCreate:



console.log(Ext.ux, Ext.ux.grid);

function StatTableExtJsCreate (dataControllerNum, totalRowsXMLPath, sourceNum, TableHeight, ColMapping, ColDev){
...
var summary = new Ext.ux.grid.GridSummary();
...
grid definition comes here
...
}

The output is this:


Object undefinedIf you need more code, please say which :).

mystix
15 Aug 2008, 1:57 AM
odd. check Firebug's net tab and see if the Ext.ux.grid.GridSummary.js file is being loaded at all.

Eisstern
15 Aug 2008, 3:53 AM
You pointed me the right way: my collegues told me to wrong header include file... :"> now it's on its place.

But there's a new problem: The summary is appended, but the cells are empty (i looked for the right css inclusion).



// total line
var summary = new Ext.ux.grid.GridSummary();

// create the grid
this.grid = new Ext.grid.GridPanel({
store: this.store,
autoHeight: this.isPrintAutoHeight,
loadMask: true,
columns: StatTableExtJsColDev[sourceNum],
plugins: [summary],
renderTo:this.htmlRootId,
width:this.tableWidth,
height:this.tableHeight,
tbar: new Ext.PagingToolbar({
pageSize: dataController[dataControllerNum].length,
store: this.store,
displayInfo: true,
displayMsg: (wmGetText("LC_COLUMN_NAME_HITS") + " {0} - {1} " + wmGetText("of") + " {2}"),
emptyMsg: wmGetText("search_no_match"),
afterPageText: wmGetText("of") + " {0}",
beforePageText: wmGetText("Page"),
paramNames: {
start: 'startpos',
limit: 'length'
}
})
});
and this is the data generation:


if (!StatTableExtJsColDev) {
var StatTableExtJsColDev = new Array();
}
StatTableExtJsColDev[0] = [
//new Ext.grid.RowNumberer(),
{header:"Datum",dataIndex:"small_labels",width:140,sortable:true},
{header:"Besuche",dataIndex:"visits",width:140,sortable:true,align:"right"},
{header:"PIs",dataIndex:"pis",width:140,sortable:true,align:"right"},
{header:"PIV",dataIndex:"piv",width:140,sortable:true,align:"right"},
{header:"Prozent",dataIndex:"percentage",width:140,sortable:true,renderer:ExtJsAssistance.format.percent,align:"right"}
];
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
if (!StatTableExtJsColMapping) {
var StatTableExtJsColMapping = new Array();
}
StatTableExtJsColMapping[0] = [
{name:"small_labels",mapping:"entry[name=small_labels]"},
{name:"visits",mapping:"entry[name=visits]"},
{name:"pis",mapping:"entry[name=pis]"},
{name:"piv",mapping:"entry[name=piv]"},
{name:"percentage",mapping:"entry[name=percentage]"}
];

mystix
15 Aug 2008, 8:46 PM
i suggest you play around with the example in the zip included in post #9.

you're missing quite a number of configs required by the plugin in the your ColumnModel config ;)

rasto1968
22 Aug 2008, 1:49 AM
Hi there,

I'm using the grid summary via the gwt-ext-ux project and have found a problem. My display contains multiple grid summarys on one page, this works fine in Firefox and Opera but on IE only the last grid gets rendered. See the following thread for more details:
http://gwt-ext.com/forum/viewtopic.php?f=7&t=2523&p=8201

Anyway, I managed to track the problem down to some code in Ext.ux.grid.GridSummary.js. The following line in the onLayout function is causing the problem:

this.scroller.setHeight(vh-this.summary.getHeight());

As far as I can tell, this function is always called with 'vh' set to undefined. Commenting out the above line cures the problem and the displays are now rendered properly on all browsers. Is this function really required ?

Cheers
Rob

rasto1968
22 Aug 2008, 2:37 AM
It looks like gwt-ext-ux was using an old version of the script/css, I've replaced them with the most recent files (from post 9) and all is now fine.

Cheers
Rob

s4brown
27 Aug 2008, 2:17 PM
Hi all,
first of all, congratulations on this wonderful plug-in.
My only problem is that, on initial load of the data, the total isn't refreshed and stays at 0.
Furthermore, when editing an already populated grid (ie. starting values not at 0), the total starts counting from the new value.
What am I missing?
Many thanks in advance!


I am having this same problem. The total is 0 on load, and it seems that that the total only reflects dirty records in the store when editing. Was there any solution to this?

Here is my code:


QuotationChargesGrid = Ext.extend(Ext.grid.EditorGridPanel, {

border: false,
collapsible: false,

initComponent: function() {

var store = new Ext.data.Store({
url: '/quote/listcharges',
reader: new Ext.data.JsonReader(),
sortInfo: {field: 'id', direction: 'ASC'}
});

var summary = new Ext.ux.grid.GridSummary();

Ext.apply(this, {

store: store,
plugins: [summary],
columns: [
{ id: 'chargename', header: 'Name', dataIndex: 'name',editor: new Ext.form.TextField()},
{ id: 'quote_id', header: 'Quote ID', dataIndex: 'quote_id'},
{ id: 'chargememo', header: 'Memo', dataIndex: 'memo', editor: new Ext.form.TextField()},
{ id: 'chargeqty', header: 'Qty', dataIndex: 'qty', editor: new Ext.form.NumberField()},
{ header: 'Price', dataIndex: 'price', summaryType: 'sum', align: 'right', editor: new Ext.form.NumberField()}
],
});


QuotationChargesGrid.superclass.initComponent.apply(this,arguments);
},

onRender: function() {

this.store.load({params: {quote_id: this.quote_id}});

QuotationChargesGrid.superclass.onRender.apply(this, arguments);
}

});

mystix
29 Aug 2008, 9:31 AM
@s4brown, looks fine to me.

could you post a drop-in test-case which reproduces the problem?

charleshimmer
2 Sep 2008, 1:56 PM
First of all great plugin!! Was exactly what I was looking for.

Its working great except I'm finding as I insert records into my datastore, only the columns using summaryType:count are being refreshed. My sum columns are not. If I change them to count they work great. This is only happening on inserts to the datastore, edits and deletes do refresh just fine. Any idea why this would happen?

Here is how I am inserting into the datastore.


success: function(response, options){
var sResponse = Ext.util.JSON.decode(response.responseText);
if(sResponse.success){
var record = new catRecordObj({
id:sResponse.record[0].id,
category:sResponse.record[0].category,
budget:sResponse.record[0].budget,
spent:sResponse.record[0].spent,
difference:sResponse.record[0].difference,
pctUsed:sResponse.record[0].pctUsed,
recordedCount:sResponse.record[0].recordedCount
});

grid.store.insert(0, record);
addForm.getEl().unmask();
closeWindow();
Ext.ux.Toast.msg('Category successfully added!','A new Budget category has been added.');
}
}

mystix
2 Sep 2008, 7:01 PM
First of all great plugin!! Was exactly what I was looking for.

Its working great except I'm finding as I insert records into my datastore, only the columns using summaryType:count are being refreshed. My sum columns are not. If I change them to count they work great. This is only happening on inserts to the datastore, edits and deletes do refresh just fine. Any idea why this would happen?

Here is how I am inserting into the datastore.


success: function(response, options){
var sResponse = Ext.util.JSON.decode(response.responseText);
if(sResponse.success){
var record = new catRecordObj({
id:sResponse.record[0].id,
category:sResponse.record[0].category,
budget:sResponse.record[0].budget,
spent:sResponse.record[0].spent,
difference:sResponse.record[0].difference,
pctUsed:sResponse.record[0].pctUsed,
recordedCount:sResponse.record[0].recordedCount
});

grid.store.insert(0, record);
addForm.getEl().unmask();
closeWindow();
Ext.ux.Toast.msg('Category successfully added!','A new Budget category has been added.');
}
}

looks fine to me.

i've updated the example included in the zip file to demonstrate Record insertion (also did some minor code cleanup).
re-download the zip and try the example -- you'll see that the total updates correctly.

charleshimmer
3 Sep 2008, 8:13 AM
It was my bad. It was a number but in string format like this "23" so multiplying it by 1 converted it to a number and it works great now.

I have found in Firefox (both mac and pc) that the first time I load a page using the grid summary plugin the summary row is a little off (see screenshot) but if you refresh the page its fine and as long as it is loaded from cache it renders fine. Any idea on why that would happen?

mystix
3 Sep 2008, 8:24 AM
It was my bad. It was a number but in string format like this "23" so multiplying it by 1 converted it to a number and it works great now.

I have found in Firefox (both mac and pc) that the first time I load a page using the grid summary plugin the summary row is a little off (see screenshot) but if you refresh the page its fine and as long as it is loaded from cache it renders fine. Any idea on why that would happen?

woah dude, those images are so huge my eyes are smarting :))

got any bigger ones which don't require the use of an electron microscope? :>

charleshimmer
3 Sep 2008, 8:54 AM
well since I don't have any extra microscopes use this link to see it (http://www.pyrblu.com/img/grid_screenshot.png)

and this is what it looks like when you refresh it (http://www.pyrblu.com/img/grid_screenshot_refreshed.png)

mystix
3 Sep 2008, 9:48 AM
well since I don't have any extra microscopes use this link to see it (http://www.pyrblu.com/img/grid_screenshot.png)

and this is what it looks like when you refresh it (http://www.pyrblu.com/img/grid_screenshot_refreshed.png)

odd... i've never seen that happen before.

some code + details would help.

charleshimmer
3 Sep 2008, 3:21 PM
i just remembered I am using the row fit extentsion. That could possibily affect it how the summary row plugin positions itself in FF. IE seems to be working fine.

Here is my viewport. The bottom two grids are the ones with the summary plugin.

var viewport = new Ext.Viewport({
layout: 'border',
border:false,
items:[new Ext.BoxComponent({
// Header
region: 'north',
el: 'header',
height:32,
margins: '10 25 0 55'
}),{
// Content
region: 'center',
margins: '0 15',
autoScroll:true,
layout: 'row-fit',
border: false,
items:[{
xtype: 'panel',
layout: 'border',
border: false,
height:'40%',
items:[{
// Top Left Panel
title: 'Inflow',
region: 'west',
width:(screen.width/2) - 20,
margins:'0 0 10 0',
split:true
},{
// Top Right Panel
title: 'Balances',
region:'center',
margins:'0 0 10 0'
}]
},{
// Middle Panel (Meter)
xtype: 'panel',
title:'Budget Meter',
html:'meter progress bar',
height:100,
collapsible:true,
animCollapse: true
},{
xtype: 'panel',
layout: 'border',
border: false,
width:'100%',
split:true,
items:[{
// Bottom Left
xtype: 'budgetGrid',
title: 'Budget Categories '+qtipIcon('Budget Categories are the categories you can set a budget for. These are the categories you tend to have more control over the amount you spend. For example you have control over how much you spend on groceries this month, as opposed to having control over the cost of the cable bill. Some more examples of budget categories are Eating-Out, Entertainment, Hobbies, Clothing, Gifts etc.'),
region: 'west',
width: (((screen.width/2) - 20) < 570) ? 570:(screen.width/2) - 20,
minWidth: 570,
split: true,
margins:'10 0 0 0'
},{
xtype:'billPayGrid',
title: 'Bills & Payments Categories '+qtipIcon('Bills and Payment categories are the expenses that are either a bill or a payment. They tend to be the same amount every month and you are normally only concerned with if they were paid on-time and not if you stayed under budget. Some examples are mortgage payments, credit card payments, garbage and recycling, gym memberships, cable bills, internet bills, phone bills etc.'),
region:'center',
margins:'10 0 0 0',
minWidth: 400
}]
}]
},
// Footer
new Ext.BoxComponent({
region: 'south',
el: 'footer',
height:42,
margins: '10 25 0 55'
})]
});

charleshimmer
3 Sep 2008, 3:26 PM
i found the problem...i was using an override to add edit icons to the columns that were editable...once i removed that it worked as it is suppose to.

charleshimmer
3 Sep 2008, 3:58 PM
http://extjs.com/forum/showthread.php?t=35229

that is the override i had in there. Does anybody know of another way to get the same effect that might not effect this plugin?

In case anybody tries to do the same thing you can read the post above and i posted how i got it to work.

mystix
4 Sep 2008, 6:22 PM
http://extjs.com/forum/showthread.php?t=35229

that is the override i had in there. Does anybody know of another way to get the same effect that might not effect this plugin?

In case anybody tries to do the same thing you can read the post above and i posted how i got it to work.

yay! =D>

(and thanks for updating your post. browse through the previous few pages and you'll notice quite a few culprits don't bother replying even)

charleshimmer
4 Sep 2008, 7:24 PM
No problem, after you spend countless hours searching through the same forum and finally find the answer you start to wonder if there could had been a quicker way to find it (i.e. marking fixes).

Deleter
18 Sep 2008, 6:07 AM
Ноw can I get GroupName in summaryRenderer? Is it possible?

mystix
18 Sep 2008, 6:19 AM
Ноw can I get GroupName in summaryRenderer? Is it possible?

:-/

Deleter
18 Sep 2008, 6:40 AM
Something like this
http://www.picamatic.com/show/2008/09/18/06/38/1034664_bigthumb.png (http://www.picamatic.com/view/1034664_18.09/)

mystix
18 Sep 2008, 6:08 PM
Something like this
http://www.picamatic.com/show/2008/09/18/06/38/1034664_bigthumb.png (http://www.picamatic.com/view/1034664_18.09/)

i still don't get it :-/

Deleter
18 Sep 2008, 9:28 PM
i still don't get it :-/
Look, I want to place name of group into summary row. Is it possible to create summaryRenderer more configurable?
Now we have an opportunity only to count, for example, items in group, but we can't get group name in summaryRenderer to make something like this:


summaryRenderer: function(v, params, data)
{
return 'Total of ' + groupName; // we can't get grouping item
}

mystix
18 Sep 2008, 9:55 PM
it appears you're attempting to combine the GridSummary plugin (which is what this thread is all about) and the GroupSummary plugin.

i haven't used the 2 plugins together (and i've not used the GroupSummary plugin), but i recall reading a post in this thread from someone who's had success combining both plugins. you'll need to search for that post though.

also, i don't understand why you want to display a single group name (out of all the different groups you have) in the gridsummary row. which group name do you pick?

larkworm
6 Oct 2008, 10:35 PM
Thask a lot, it's useful for me!

bobjbain
9 Oct 2008, 2:17 AM
it appears you're attempting to combine the GridSummary plugin (which is what this thread is all about) and the GroupSummary plugin.

i haven't used the 2 plugins together (and i've not used the GroupSummary plugin), but i recall reading a post in this thread from someone who's had success combining both plugins. you'll need to search for that post though.

also, i don't understand why you want to display a single group name (out of all the different groups you have) in the gridsummary row. which group name do you pick?

Thanks a lot guys, I have managed to get the GridSummary and GroupSummary working in the same grid.

Although I haven't tried changing the summaryRenderer to add the GroupSummary name.

Richie1985
9 Oct 2008, 4:39 AM
Hi,

i want to display some grids in a tabpanel, but there i cant display a Summary Row with the GridSummary Plugin. When i render the Grid to a window then i see the summaryRow.

Can you help me?

mystix
9 Oct 2008, 4:45 AM
i'm rendering grids inside panels contained in a tabpanel just fine.
post your code.

Richie1985
9 Oct 2008, 5:11 AM
here my code:


Ext.onReady(function(){

var MyRecord = Ext.ux.data.CalcRecord.create([
{name: 'id', type: 'int'},
{name: 'datum'},
{name: 'planstunden',mapping: 'planzeit'},
{name: 'giltstunden',mapping: 'dauergilt'},
{name: 'krankmitattest'},
{name: 'krankohneattest'},
{name: 'kranknachhause'},
{name: 'sum', dependencies: ['krankmitattest', 'krankohneattest', 'kranknachhause'], notDirty: true, calc: function(record) {
return record.get('krankmitattest') + record.get('krankohneattest') + record.get('kranknachhause');
}},
{name: 'krankenquote', dependencies: ['krankmitattest', 'krankohneattest', 'kranknachhause'], notDirty: true, calc: function(record) {
var sumkrank = record.get('krankmitattest') + record.get('krankohneattest') + record.get('kranknachhause');
var planstunden = record.get('planstunden');
var krankenquote = (sumkrank*100)/planstunden;
//console.log(sumkrank + ' ' + planstunden + ' ' + krankenquote);
if(planstunden!=null){
return (sumkrank*100)/planstunden;
}else{
return 0;
}
}}
]);
var tabs = new Ext.TabPanel({
enableTabScroll: true,
region: 'center',
xtype: 'tabpanel',
id: 'tabpanel'
});
function stunden(value){
var temp = value/60;
return temp.toFixed(2);

}
function prozent(value, params, record){
var temp = value.toFixed(2);
var jetzt = new Date();
if(record.data.datum == jetzt.format("d.m.Y")){
params.css = 'redcell';
}
return temp + '%';


}
new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsible: true,
title: 'Monate',
xtype: 'treepanel',

width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({
dataUrl: 'datahandler/krankenquote_tag.php',
requestMethod: 'POST',
baseParams:{task : 'read_monate'}
}),
root:new Ext.tree.AsyncTreeNode({
id: 'mytree',
text: 'My root'
}),
rootVisible: false,
listeners: {
click: function(n) {
//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '" ' + n.attributes.id + '');
tabs.add(new Ext.grid.GridPanel({
id: n.attributes.id + '_grid',
name: n.attributes.id + '_grid',
store: new Ext.data.Store({
id: n.attributes.id + '_store',
proxy: new Ext.data.HttpProxy({
url: 'datahandler/krankenquote_tag.php', // File to connect to
method: 'POST'
}),
baseParams:{task: "read", monat: n.attributes.id }, // this parameter asks for listing
reader: new Ext.data.JsonReader({ // we tell the datastore where to get his data from
root: 'results',
totalProperty: 'total',
id: 'id'
},MyRecord)
}),
columns: [
{id:'id', header: "ID", width: 200, sortable: true, dataIndex: 'id', hidden: true},
{header: "Datum", width: 120, sortable: true, dataIndex: 'datum'},
{header: "Planstunden", width: 120, sortable: true, dataIndex: 'planstunden', renderer: stunden, summaryType: 'sum'},
{header: "bezahlte Std", width: 120, sortable: true, dataIndex: 'giltstunden', renderer: stunden, summaryType: 'count'},
{header: "Krank mit Attest", width: 120, sortable: true, dataIndex: 'krankmitattest', renderer: stunden, summaryType: 'count'},
{header: "Krank ohne Attest", width: 120, sortable: true, dataIndex: 'krankohneattest', renderer: stunden, summaryType: 'count'},
{header: "Krank nach Hause", width: 120, sortable: true, dataIndex: 'kranknachhause', renderer: stunden, summaryType: 'count'},
{header: 'Summe krank', dataIndex: 'sum', sortable: true, renderer: stunden, summaryType: 'count'},
{header: 'Krankenquote', dataIndex: 'krankenquote', sortable: true, renderer: prozent, summaryType: 'count'}
],
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
closable:true,
height: 200,
width: 200,
plugins: new Ext.ux.grid.GridSummary(),
title: n.attributes.text,
stripeRows: true
})
).show();
var id = n.attributes.id + '_grid';
var grid = Ext.getCmp(id);
grid.store.load();
}
}
}, tabs]
});

thank you!

crxtech
9 Oct 2008, 5:44 AM
Hi,

i want to display some grids in a tabpanel, but there i cant display a Summary Row with the GridSummary Plugin. When i render the Grid to a window then i see the summaryRow.

Can you help me?

I am having the same problem. I can see the summary row, but as soon as the grid finishes loading it gets positioned past the bottom of the tab, pretty much completely. (see attached images)



// create the Grid for budget
var budgetGrid = new Ext.grid.GridPanel({
id:'budgetGrid',
el:'budgetTab',
store: budgetDS,
viewConfig:{emptyText:'No budget to display'},
loadMask:true,
width:710,
height:250,
plugins: summary, // have the GridPanel use the GridSummary plugin
stripeRows: true,
cm: headers,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
tbar: new Ext.Toolbar({
........
})
});

var tabs = new Ext.TabPanel({
id:'tabs',
renderTo: 'tabs',
bodyStyle:'left:0',
layoutOnTabChange:true,
disabled: true,
width:726,
height: 325,
plain:true,
defaults:{autoScroll: false},
items:[
{
id:'budgetTab',
title: 'Budget',
listeners: {
render:function() {
FYcount(); //count years
budgetGrid.render(); //Render the grid
budgetDS.load(); //Load the JSON
}
}
},{
id:'grantTab',
title: 'Grants',
listeners: {
render:function() {
grantGrid.render(); //Render the grid
grantDS.load(); //Load the JSON
}
}
}
]
});

Richie1985
9 Oct 2008, 9:11 AM
no idea? :(

NetFantom
9 Oct 2008, 11:37 AM
Works great with Store
But don't work with JsonStore!:((

Richie1985
10 Oct 2008, 1:07 AM
hihi, when i change the size of my browser window, then the summary row is shown.

this i dont understand :(

Richie1985
10 Oct 2008, 2:15 AM
if found the problem:


var tabs = new Ext.TabPanel({
//enableTabScroll: true,
region: 'center',
//tabPosition: 'bottom',
plain: true,
region: 'center',
margins: '5 5 25 5',
activeTab: 0,
id: 'tabpanel'
});

i played with the margins in the tabpanel, now i have the summary row perfectly :)

but it solved not the real problem, because when i resize the browser window now, the summaryrow ist on a false place :(

thanks!

wwwtd
10 Oct 2008, 9:57 PM
how to use Ext.ux.data.CalcRecord and this issue to get column and row 's totle value?

I did not get all totle values that I want .someone can help me and give me an example?

mycode:[QUOTE]<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ext.grid.GridSummary Plugin Example</title>
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css"/>
<link rel="stylesheet" href="../css/Ext.ux.grid.GridSummary.css"/>
<script src="../js/ext/adapter/ext/ext-base.js"></script>
<script src="../js/ext/ext-all.js"></script>
<script src='../js/Ext.ux/Ext.ux.grid.GridSummary.js'></script><!-- Ext.ux.grid.GridSummary plugin -->
<script src='../js/Ext.ux/Ext.ux.grid.CalcRecord.js'></script>
<script>
Ext.util.Format.usMoney = function(v) { // override Ext.util.usMoney
v = Ext.num(v, 0); // ensure v is a valid numeric value, otherwise use 0 as a base (fixes $NaN.00 appearing in summaryRow when no records exist)
v = (Math.round((v - 0) * 100)) / 100;
v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
v = String(v);
var ps = v.split('.');
var whole = ps[0];
var sub = ps[1] ? '.'+ ps[1] : '.00';
var r = /(\d+)(\d{3})/;
while (r.test(whole)) {
whole = whole.replace(r, '$1' + ',' + '$2');
}
v = whole + sub;
if (v.charAt(0) == '-') {
return '-$' + v.substr(1);
}
return "$" + v;
}
Ext.onReady(function() {
// custom renderer example
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// custom renderer example
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if(val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// custom summary renderer example
function totalCompanies(v, params, data) {
return v? ((v === 0 || v > 1) ? '(' + v +' Companies)' : '(1 Company)') : '';
}

// custom summary renderer example
function averageChange(v, params, data) {
return v? ('Average:&#160;' + v) : '';
}
var fields="{name: 'price', type: 'float'},{name: 'a001', type: 'float'},"
+"{name: 'pctChange', type: 'float'},"
+"{name:'all',type:'float',formula: '{price}+{a001}+{pctChange}', notDirty: true}";
var myfields=eval('([' + fields + '])');


var myrecord=Ext.ux.data.CalcRecord.create(myfields);
// create the data store
/* var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});*/
// store.loadData(myData);
var paystore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:"test.jsp"}),
reader:new Ext.data.JsonReader({totalProperty:"results",root:"rows"},myrecord)
});

var summary = new Ext.ux.grid.GridSummary();

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
renderTo: 'grid-example',
store: paystore,
columns: [
new Ext.grid.RowNumberer(),
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', summaryType: 'sum', editor: new Ext.form.NumberField({allowDecimals: true})},
{header: "ces", width: 100, sortable: true, renderer: change, dataIndex: 'a001', summaryType: 'sum', summaryRenderer: averageChange},
{header: "pctChange", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "tot", width: 300, sortable: true,dataIndex: 'all',summaryType: 'sum',renderer:Ext.util.Format.usMoney}
],
plugins: [summary], // have the EditorGridPanel use the GridSummary plugin
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: paystore,
displayInfo: true,
displayMsg: '

saJoshua
14 Oct 2008, 1:10 AM
@ NetFantom:

Works great with Store
But don't work with JsonStore!:((
Works fine for me with JsonStores. Can you post your code? We can help fix your implementation.


@wwwtd :
Let me introduce you to this famous little tool. It's called CODE tags. It helps anyone read what you're writing more easily. Make is simple for someone to help you Plz! Otherwise, don't wonder why no-one replies.


Josh

wwwtd
14 Oct 2008, 1:19 AM
Yo!
Let me introduce you to this famous little tool. It's called CODE tags. It helps anyone read what you're writing more easily. Make is simple for someone to help you Plz! Otherwise, don't wonder why no-one replies.
Thank you for your advices! I had solved already~

The last method have something wrong~.I used above~

wwwtd
14 Oct 2008, 1:21 AM
{name:'all',type:'float',formula: '{price}+{a001}+{pctChange}', notDirty: true}";
there is something wrong with get the true numbers

saJoshua
14 Oct 2008, 1:22 AM
Thank you for your advices! I had solved already~

The last method have something wrong~.I used above~

Cool stuff! Care to share your solution for us all to learn from it?

Josh

SNAP! Gotcha, thanks WWWTD

wwwtd
15 Oct 2008, 3:37 AM
Cool stuff! Care to share your solution for us all to learn from it?

Josh

SNAP! Gotcha, thanks WWWTD

I used the code like this:


{name: 'sum', dependencies: ['krankmitattest', 'krankohneattest', 'kranknachhause'], notDirty: true, calc: function(record) {

return record.get('krankmitattest') + record.get('krankohneattest') + record.get('kranknachhause');

it works fine

wwwtd
15 Oct 2008, 3:54 AM
you can see http://extjs.com/forum/showthread.php?t=28826

and Tasm 's code. his code with formula:

Trinad
20 Oct 2008, 7:12 AM
Hi,

Sorry for posting my thread link in this thread, the reason whay I am posting my thread link here is the problem I have is similar to this thread,I appreciate your help if any body guide me towards the solution.

Please find my thread link as mentioned below.

http://extjs.com/forum/showthread.php?p=240470

Thanks,
Trinad.

Trinad
23 Oct 2008, 7:31 AM
Hi,

I am using grid summary plugin,I am doing multi level grouping (2 levels) I am trying to display the totals for the first group(i.e. I am grouping by projectName and resourceName I need to display the totals for all the resources for a project currently summary plugin is displaying the totals for each resource also totals are displayed twice).

Please find the below code for summary plugin what I am using now.

10131

In the above code doGroupEnd method is called twice for each resource(each sub group) because of that totals displayed twice.

Is there any way I can set the groupField as projectId for summary plugin, so that plugin will calculate only the top level group not the sublevel group.

Please find the below screen shot what I am getting the results now.

10132

Thanks,
Trinad.

pratapbm
5 Nov 2008, 11:29 PM
Hi all,

I have specific requirement like horizontal scroll bar should appear after summary row.

How can we achieve this? any pointers to this will be helpful.

Thanks in advance.

mystix
6 Nov 2008, 1:35 AM
Hi all,

I have specific requirement like horizontal scroll bar should appear after summary row.

How can we achieve this? any pointers to this will be helpful.

Thanks in advance.

refer to posts #37 - #40.

wayne_o
13 Nov 2008, 4:51 AM
Hi all,

I am using grid summary plugin,I am doing multi level grouping (2 levels) I am trying to display the totals for the first group(i.e. I am grouping by projectName and resourceName I need to display the totals for all the resources for a project currently summary plugin is displaying the totals for each resource also totals are displayed twice).

I'm finding exactly the same issue - is there any clues as to what's going on here?

wayne_o
13 Nov 2008, 6:00 AM
I'm finding exactly the same issue - is there any clues as to what's going on here?

OK

I think I mayu have solved it but I'm worried I may be breaking something else where - the reason it prints out twice is because of the loop near the end of the doRender function in Ext.ux.MultiGroupingStore.

If you change it to



//for (var k = 0; k < toEnd; k++) {
this.doGroupEnd(buf, g, cs, ds, colCount);
//}


So it only calls the method once per group it obviously only prints once - why was that loop there in the first place? Am I risking breaking something by commenting that code?

w://

[edit]

OK - it calls the doGroupEnd method once for each grouping level - makes sense - just needs to be styled in a way that makes that obvious. Plus - it doesn't perform a rollup on all the levels in the group beyond one group level - I'll try to fix this today and upload some modded code..

w://

hpandey
13 Nov 2008, 12:07 PM
I declared another function and differed the processing of unnecessary rows to that one. here you go. Let me know if you have issues with that


for (var k = 0; k < toEnd; k++) {
if (k == toEnd-1) {
this.doGroupEnd(buf, g, cs, ds, colCount);
} else {
this.doMultiGroupEnd(buf, g, cs, ds, colCount);
}
}

You may declare the doMultiGroupEnd like this just before getRows ( or anywhere you like)


doMultiGroupEnd: function(buf, g, cs, ds, colCount) {
buf[buf.length] = '</div></div>';
},

vinnybozz
20 Nov 2008, 1:33 PM
SOLVED

Hi I hope someone can help me.

I'm using the RemoteComponent Plugin to Dynamically Load a Grid into a Panel.

This grid itself uses the gridSummary Plugin.

It seems to work fine. However, when the grid overflows the panel to the right the GridSummary does not follow suit and stays put.

I've looked into the syncSummaryScroll function and here is where the bug occurs:


this.view.summaryWrap.dom.scrollLeft = mb.scrollLeft;
this.view.summaryWrap.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)

For some reason, scrollLeft isnt be modified.
I even tried this from the firebug console:


Ext.get('gen-XX').dom.scrollLeft = 10;

it works on a normal gridSummary (not dynamic) correctly scrolling to the left by 10px, but not on mine.

Then I inspected the DOM in Firebug and changed the value there, it worked in a normal setting but again not in my dynamic one. The value of scrollLeft directly changed back to 0.

So my question is if anybody knows why:

this.view.summaryWrap.dom.scrollLeft
is locked !!

thx for your help

-----------------------------------------
UPDATE: including the GridSummary.css solved this problem. (simple, but this took me a while !!!)

MaxT
24 Nov 2008, 9:24 AM
Nice plugin, I've got it working fine with a grid configured to load remote paged data.

The calculation methods are not required when the summaries are calculated server side. However, I did find it useful to add an extra param to the summary renderers to get the scope of the GridSummary object.



renderSummary : function(o, cs, cm) {
cs = cs || this.view.getColumnData();
var cfg = cm.config,
buf = [],
last = cs.length - 1;

for (var i = 0, len = cs.length; i < len; i++) {
var c = cs[i], cf = cfg[i], p = {};

p.id = c.id;
p.style = c.style;
p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');

if (cf.summaryType || cf.summaryRenderer) {
p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o, this); // Added this
} else {
p.value = '';
}
if (p.value === undefined || p.value === ""){
p.value = "*";
}
buf[buf.length] = this.cellTpl.apply(p);
}



Then I can do something like this in the renderer function:



function renderRemoteTotal( v, params, data, gs ) {
try {
v = gs.grid.store.reader.jsonData.gstotal;
} catch (e) {
v = "";
}
return v;
}


Ok, You could use a global reference for the store, but it's much easier if you have a reference to the GridSummary object.

Max

anghuda
9 Dec 2008, 5:27 PM
Hi all,
first of all, congratulations on this wonderful plug-in.
My only problem is that, on initial load of the data, the total isn't refreshed and stays at 0.
Furthermore, when editing an already populated grid (ie. starting values not at 0), the total starts counting from the new value.
What am I missing?
Many thanks in advance!


<?php
$this->load->helper('form');
?>
<div id="subtitle">
<h2>Area impresa - Modulo 1</h2>
<h3>B. Pesatura FCA</h3>
<div id="infoint">
Intervista: <?= $id; ?><br>
Azienda: <?= $DENOMINAZIONE_AZ; ?><br>
Tutor: <?= $tutor; ?>
</div>
</div>
<div>
<?=form_open('hitex/unofca/'.$id); ?>
<div class="destra"><input type="image" src="<?= base_url(); ?>img/avanti.gif" alt="Prosegui" onclick="return checkAndSend();"></div>
<input type="hidden" name="serval" id="serval" value="">
<?=form_close(); ?>
</div>
<div style="text-align: left;">
<div id="grid"></div>
</div>
<script>
<!--
var grid;
var summary;
Ext.BLANK_IMAGE_URL = '<?= base_url() ?>ext/resources/images/default/s.gif';
Ext.onReady(function(){

function totPesi(v, params, data)
{
return 'Totale: '+ v;
}

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '<?= base_url() ?>index.php/ajax/unofca/<?= $id; ?>',
method: 'post'
}),
reader: new Ext.data.JsonReader({
root: 'dati',
totalProperty: 'totale',
id: 'id'
}, [
{name: 'nome', mapping: 'nome'},
{name: 'categoria', mapping: 'categoria'},
{name: 'peso', mapping: 'peso'}
])
});
var cm = new Ext.grid.ColumnModel([
{
header: "Nome",
dataIndex: 'nome',
width: 220
},
{
header: "Categoria",
dataIndex: 'categoria',
width: 220
},
{
header: "Peso",
dataIndex: 'peso',
width: 70,
align: 'center',
summaryType: 'sum',
summaryRenderer: totPesi,
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
allowDecimals: false,
maxValue: 100
})
}
]);

summary = new Ext.ux.grid.GridSummary();

grid = new Ext.grid.EditorGridPanel({
store: ds,
cm: cm,
renderTo: 'grid',
width:600,
height:320,
title:'Pesi degli FCA',
frame:false,
clicksToEdit:1,
stripeRows: true,
plugins: [summary]
});

ds.load();
});

function checkAndSend()
{
var serie = "";
var pesotot = 0;
righe = grid.store.getRange();

for (i = 0; i < righe.length; i++) {
riga = righe[i];

if (riga.data.peso < 1) {
Ext.Msg.alert('Errore', 'Ciascun FCA deve avere un peso maggiore di 0');
return false;
}

serie += riga.id + '|' + riga.data.peso + '#';
pesotot += riga.data.peso;
}

if (pesotot == 100) {
hid = document.getElementById('serval');
hid.value = serie;
//return true;
} else {
Ext.Msg.alert('Errore', 'La somma dei pesi deve essere pari a 100');
return false;
}
}
//-->
</script>

in data store definition, calculated data must be declare as integer or float.

change
{name: 'peso', mapping: 'peso'}

to
{name: 'peso', type:'int', mapping: 'peso'}

calavera
3 Jan 2009, 12:26 AM
Hello. Did anyone managed to get the sum of ALL fields from the grid ? I mean, not from the current page, but from all pages, a grand total... I'm using JSON to fill the store and the pagination for the grid. I would like to have a sum of all records based on all results.

Thank you. It's a great script!

calavera
10 Jan 2009, 8:48 PM
Well, nobody can help me getting the totals of every row from the grid ? I just need to calculate the sum of all records from database, not just the ones on the current page. But I have no idea how to sum all of them...maybe doing a custom store for this calculation would help...dunno. Anyone ?

Thank you.

mystix
10 Jan 2009, 9:58 PM
Well, nobody can help me getting the totals of every row from the grid ? I just need to calculate the sum of all records from database, not just the ones on the current page. But I have no idea how to sum all of them...maybe doing a custom store for this calculation would help...dunno. Anyone ?

Thank you.

the answer's right under your nose.
read post #219.

mntek
21 Jan 2009, 6:02 AM
Can i handle click on summary cell ?
this code doesn't work with GroupSummary .


grid.on('cellclick',
function(grid, rowIndex, columnIndex, e) {
...
}, this);

mystix
21 Jan 2009, 10:38 AM
Can i handle click on summary cell ?
this code doesn't work with GroupSummary .


grid.on('cellclick',
function(grid, rowIndex, columnIndex, e) {
...
}, this);


this is the gridsummary plugin, not the groupsummary plugin.

p.s. if you're going to repost in the Help forum, you should provide complete test code.

mntek
22 Jan 2009, 2:02 PM
this is the gridsummary plugin, not the groupsummary plugin.

p.s. if you're going to repost in the Help forum, you should provide complete test code.

Simply, groupSummary based on gridSummary (added code for summary row after each group).
And I'll want to add listener for summaryRowClick event. How it can be done?

damon1977
5 Feb 2009, 9:51 AM
This is an excellent plug in! I needed it to do a few things for me that it didn't do.

I modified the addon to allow for multiple summary rows. I also added a new calculation to average values ignoring a value of 0.

Note: this change requires the summaryType and summaryRenderer properties of the columns in the columnModel to be arrays, instead of strings even if you have one summary row. for example: summaryType: 'sum' becomes summaryType: ['sum']

Here's the modified plugin:



Ext.ns('Ext.ux.grid');

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

Ext.extend(Ext.ux.grid.GridSummary, Ext.util.Observable, {
init : function(grid) {
this.grid = grid;
this.cm = grid.getColumnModel();
this.view = grid.getView();
this.count = this.summaryRowCount(this.cm.config);

var v = this.view;

// override GridView's onLayout() method
v.onLayout = this.onLayout;

v.afterMethod('render', this.refreshSummary, this);
v.afterMethod('refresh', this.refreshSummary, this);
v.afterMethod('syncScroll', this.syncSummaryScroll, this);
v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);

// update summary row on store's add/remove/clear/update events
grid.store.on({
add: this.refreshSummary,
remove: this.refreshSummary,
clear: this.refreshSummary,
update: this.refreshSummary,
scope: this
});

if (!this.rowTpl) {
this.rowTpl = new Ext.Template(
'<div class="x-grid3-summary-row x-grid3-gridsummary-row-offset">',
'<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<tbody><tr>{cells}</tr></tbody>',
'</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();
},

calculate : function(rs, cm) {
var data = {}, cfg = cm.config;

for (var i = 0, len = cfg.length; i < len; i++) { // loop through all columns in ColumnModel
var cf = cfg[i], // get column's configuration
cname = cf.dataIndex; // get column dataIndex

// initialise grid summary row data for
// the current column being worked on
data[cname] = []; for (var sr = 0; sr<this.count; sr++) data[cname][sr] = 0;

for (var sr = 0; sr < this.count; sr++) {
if (cf.summaryType && cf.summaryType[sr]) {
for (var j = 0, jlen = rs.length; j < jlen; j++) {
var r = rs[j]; // get a single Record
data[cname][sr] = Ext.ux.grid.GridSummary.Calculations[cf.summaryType[sr]](r.get(cname), r, cname, data, j, sr);
}
}
}
}
return data;
},

onLayout : function(vw, vh) {
if (Ext.type(vh) != 'number') { // handles grid's height:'auto' config
return;
}
// note: this method is scoped to the GridView
if (!this.grid.getGridEl().hasClass('x-grid-hide-gridsummary')) {
// readjust gridview's height only if grid summary row is visible
this.scroller.setHeight(vh - (this.summary.getHeight()));
}
},

syncSummaryScroll : function() {
var mb = this.view.scroller.dom;

this.view.summaryWrap.dom.scrollLeft = mb.scrollLeft;
this.view.summaryWrap.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
},

doWidth : function(col, w, tw) {
var els = this.view.summary.select('div.x-grid3-summary-row');

//alert(Ext.util.JSON.encode(s));

for(var x = 0; x < els.getCount(); x++) {
var s = els.item(x).dom;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.width = w;
}
},

doAllWidths : function(ws, tw) {
var els = this.view.summary.select('div.x-grid3-summary-row'), wlen = ws.length;

for(var x = 0; x < els.getCount(); x++) {
var s = els.item(x).dom;
s.firstChild.style.width = tw;

var cells = s.firstChild.rows[0].childNodes;

for (var j = 0; j < wlen; j++) {
cells[j].style.width = ws[j];
}
}
},


doHidden : function(col, hidden, tw) {
var s = this.view.summary.dom,
display = hidden ? 'none' : '';

s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.display = display;
},

renderSummary : function(o, cs, cm) {
cs = cs || this.view.getColumnData();
var cfg = cm.config,
ret = [],
last = cs.length - 1;

for (var sr = 0; sr < this.count; sr++) {
var buf = [];

for (var i = 0, len = cs.length; i < len; i++) {
var c = cs[i], cf = cfg[i], p = {};

p.id = c.id;
p.style = c.style;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');

if ((cf.summaryType && cf.summaryType[sr]) || (cf.summaryRenderer && cf.summaryRenderer[sr])) {
p.value = (cf.summaryRenderer[sr] || c.renderer)(o.data[c.name][sr], p, o)
} else {
p.value = "";
}

if (p.value == undefined || p.value === "") p.value = " ";
buf[buf.length] = this.cellTpl.apply(p);
}

ret[ret.length] = this.rowTpl.apply({
tstyle: 'width:' + this.view.getTotalWidth() + ';',
cells: buf.join('')
});
}

return ret.join('');
},

refreshSummary : function() {
var g = this.grid, ds = g.store,
cs = this.view.getColumnData(),
cm = this.cm,
rs = ds.getRange(),
data = this.calculate(rs, cm),
buf = this.renderSummary({data: data}, cs, cm);

if (!this.view.summaryWrap) {
this.view.summaryWrap = Ext.DomHelper.insertAfter(this.view.scroller, {
tag: 'div',
cls: 'x-grid3-gridsummary-row-inner'
}, true);
}
this.view.summary = this.view.summaryWrap.update(buf);
},

toggleSummary : function(visible) { // true to display summary row
var el = this.grid.getGridEl();

if (el) {
if (visible === undefined) {
visible = el.hasClass('x-grid-hide-gridsummary');
}
el[visible ? 'removeClass' : 'addClass']('x-grid-hide-gridsummary');

this.view.layout(); // readjust gridview height
}
},

getSummaryNode : function() {
return this.view.summary
},

summaryRowCount: function(cfg) {
var ret = 0;
for (var i = 0; i < cfg.length; i++) { // loop through all columns in ColumnModel
var cf = cfg[i], // get column's configuration
t = (cf.summaryType ? cf.summaryType.length : 0 ),
r = (cf.summaryRenderer ? cf.summaryRenderer.length : 0 );
ret = ( t > ret ? t : r > ret ? r : ret );
}
return ret;
}
});
Ext.reg('gridsummary', Ext.ux.grid.GridSummary);

/*
* all Calculation methods are called on each Record in the Store
* with the following 5 parameters:
*
* v - cell value
* record - reference to the current Record
* colName - column name (i.e. the ColumnModel's dataIndex)
* data - the cumulative data for the current column + summaryType up to the current Record
* rowIdx - current row index
*/
Ext.ux.grid.GridSummary.Calculations = {
sum : function(v, record, colName, data, dr, sr) {
return data[colName][sr] + Ext.num(v, 0);
},

count : function(v, record, colName, data, dr, sr) {
return dr + 1;
},

max : function(v, record, colName, data, dr, sr) {
return Math.max(Ext.num(v, 0), data[colName][sr]);
},

min : function(v, record, colName, data, dr, sr) {
return Math.min(Ext.num(v, 0), data[colName][sr]);
},

average : function(v, record, colName, data, dr, sr) {
var t = data[colName][sr] + Ext.num(v, 0), count = record.store.getCount();
return dr == count - 1 ? (t / count) : t;
},
//Added to average ignoring 0 values
averageIgnoreZero : function(v, record, colName, data, dr, sr) {
var regEx = /^[1-9]/;
var t = data[colName][sr] + Ext.num(v, 0), count = record.store.query(colName, regEx).getCount();
return dr == count - 1 ? (t / count) : t;
}
}

georgeblackjr
20 Feb 2009, 4:56 PM
The summary row is rendering at the bottom of the grid panel instead of the bottom of the data. I have my grid loading in a fit layout and the initial data does not fill the page. Is there a way to get the summary row to render at the bottom of the grid data instead?

mystix
21 Feb 2009, 7:02 AM
The summary row is rendering at the bottom of the grid panel instead of the bottom of the data. I have my grid loading in a fit layout and the initial data does not fill the page. Is there a way to get the summary row to render at the bottom of the grid data instead?

you mean as the final row in your grid? if that's all you're after then this plugin is overkill.
simply send the data for the summary row as the final record for your store, then add an additional field to your store and always sort on that field (so your total row is always sorted last), something like this: http://extjs.com/forum/showthread.php?t=40593

mystix
21 Feb 2009, 7:06 AM
@mntek -- no idea. i've never had the need to use both plugins together. i do recall reading a post in this thread about someone successfully combining both plugins though, but you'll need to plow through the rest of this thread yourself to find the solution.

@damon1977 -- thanks for sharing! it's an interesting implementation, but a pity my hands are full atm. i'll give it a try when i get more free time on my hands :)

pieter333
2 Mar 2009, 8:50 AM
First of all thanks for this really great plugin!!!

Unfortunately I have a bug to report. If you change the summaryType voor the price column from 'sum' into 'max', the grid will succesfully display the maximum price. But if you choose 'min' the answer is zero!

I can't figure out where it goes wrong, could please someone take a look at it?

Thanks!

Pieter

mystix
2 Mar 2009, 9:05 AM
First of all thanks for this really great plugin!!!

Unfortunately I have a bug to report. If you change the summaryType voor the price column from 'sum' into 'max', the grid will succesfully display the maximum price. But if you choose 'min' the answer is zero!

I can't figure out where it goes wrong, could please someone take a look at it?

Thanks!

Pieter

do you have a simple test case for this?

[edit]
the included example (see post #9 for the zip file) uses summaryType: 'min' on the "% change" column, and produces the correct results. i just tested it against the official Ext 2.2.1 download again just to be sure too.
make sure you specify the correct field type (i.e. type: 'float' or type: 'int') in your columnmodel definition.

dima
9 Mar 2009, 11:34 PM
If I put a new line, all fine, but if I simply edit total_price column is not updated.


{header: "Итого(руб)", dataIndex: 'total_price', sortable: false,summaryType: 'sum' ,
renderer: function(v, params, record){
return (record.data.count * record.data.price);
},
summaryRenderer: function(v, params, data){
/* alert(gr.getStore().getCount())
var totalMinutes = 0;
for( var i = 0; i < ds.getCount(); i++ ) {
var record = gr.store.getAt(i);
totalMinutes += record.get('total_price');

} */

return ((v === 0 || v > 1) ? '(Всго ' + v +' )' : '(Всго 1)');
}
}



getRec:function(config){
var innerFunc = function(){
isNew = true;
gr.getStore().each(function(store){
if(config.id == store.data.ID){
isNew = false;
for(i=0;i< gr.store.getCount();i++){
var record = gr.store.getAt(i);
if (record && record.id > 0){
if(record.get('ID') == config.id){
record.set('count',store.data.count + 1,true);
record.commit(true);
}
}
}
store.reload();
}
});
if(isNew){
var p = new NewRecord({ ID: config.id,
name: config.text,
count: config.count,
price: config.price,
total_price: config.count * config.price});
gr.stopEditing();
ds.insert(0, p);
gr.startEditing(0, 0);
}
//
};
innerFunc.call(this);
}

mystix
10 Mar 2009, 12:26 AM
If I put a new line, all fine, but if I simply edit total_price column is not updated.


i have absolutely no idea what your code is doing.
the example included in the zip uses an editorgridpanel, and works correctly.

compare your code with the included example and you may be able to figure out where the problem lies.

dima
10 Mar 2009, 3:50 AM
i have absolutely no idea what your code is doing.
the example included in the zip uses an editorgridpanel, and works correctly.

compare your code with the included example and you may be able to figure out where the problem lies.





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ext.ux.grid.GridSummary Plugin Example</title>

<link rel="stylesheet" href="../extjs/resources/css/ext-all.css"/>
<link rel="stylesheet" href="Ext.ux.grid.GridSummary.css"/>
<!-- CSS required by Ext.ux.grid.GridSummary plugin -->

<script src="../extjs/adapter/ext/ext-base.js"></script>
<script src="../extjs/ext-all.js"></script>
<script src='Ext.ux.grid.GridSummary.js'></script>
<!-- Ext.ux.grid.GridSummary plugin -->

<script>
Ext.override(Ext.data.Record, {
set : function(name, value, force) {

if (force !== true && String(this.data[name]) == String(value)) {
return;
}

this.setModified(name);
this.data[name] = value;
if (!this.editing && this.store) {
this.store.afterEdit(this);
}
},
setModified: function(name) {
this.dirty = true;
if (!this.modified) {
this.modified = {};
}
if (typeof this.modified[name] == 'undefined') {
this.modified[name] = this.data[name];
}
if (!this.editing && this.store) {
this.store.afterEdit(this);
}
}
});
Ext.util.Format.usMoney = function(v) { // override Ext.util.usMoney
v = Ext.num(v, 0); // ensure v is a valid numeric value, otherwise use 0 as a base (fixes $NaN.00 appearing in summaryRow when no records exist)
v = (Math.round((v - 0) * 100)) / 100;
v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
v = String(v);

var ps = v.split('.');
var whole = ps[0];
var sub = ps[1] ? '.' + ps[1] : '.00';
var r = /(\d+)(\d{3})/;

while (r.test(whole)) {
whole = whole.replace(r, '$1' + ',' + '$2');
}

v = whole + sub;

if (v.charAt(0) == '-') {
return '-$' + v.substr(1);
}

return v + " $";
}

Ext.onReady(function() {
Ext.QuickTips.init();

var myData = [
['3m Co',1,1,1],
['Alcoa Inc',1,1,1],
['Altria Group Inc',1,1,1],
];

// custom renderer example
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// custom renderer example
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// custom summary renderer example
function totalCompanies(v, params, data) {
params.attr = 'ext:qtip="Total no. of companies"'; // summary column tooltip example
return v ? ((v === 0 || v > 1) ? '(' + v + ' Companies)' : '(1 Company)') : '';
}

// custom summary renderer example
function averageChange(v, params, data) {
params.attr = 'ext:qtip="Average % Change"'; // summary column tooltip example
return v ? ('Count: ' + v) : '';
}


// this could be inline, but we want to define the Company record
// type so we can add records dynamically
var Company = Ext.data.Record.create([
{name: 'company'},
{name: 'count', type: 'int'},
{name: 'price', type: 'float'},
{name: 'tprice',type: 'float'}
]);

// create the data store
var store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({
id: 0
}, Company)
});
store.loadData(myData);

var summary = new Ext.ux.grid.GridSummary();

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
renderTo: 'grid-example',
store: store,
columns: [
new Ext.grid.RowNumberer(),
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', summaryType: 'count'},
{header: "Count", width: 100, sortable: true, renderer: change, dataIndex: 'count', summaryType: 'sum', summaryRenderer: averageChange,
renderer: function(v, params, record) {
store.commitChanges();
return (record.data.tprice = record.data.count * record.data.price);
}
},
{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
{header: "Total Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'tprice', summaryType: 'sum',
editor: new Ext.form.NumberField({allowDecimals: true})
}

],
plugins: [summary], // have the EditorGridPanel use the GridSummary plugin
stripeRows: true,
height:350,
width:600,
// title:'Array Grid',

tbar: [{
text: 'Add Company',
handler : function() {
//change code
isNew = true;
grid.getStore().each(function(store) {
if ("Alcoa Inc" == store.data.company) {
//alert(store.data.company);
isNew = false;
for (i = 0; i < grid.store.getCount(); i++) {
var record = grid.store.getAt(i);
if (record.get('company') == "Alcoa Inc") {
record.set('count', store.data.count + 1, true);
record.commit(true);
}

}
}
});
if (isNew) {
var p = new Company({
company: 'Update [Alcoa Inc]',
price: 1,
change: 1,
pctChange: 100,
lastChange: (new Date()).clearTime()
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
//end change code
}
},{
text: 'Add New',
handler : function() {
var p = new Company({
company: 'New Company 1',
count: 1,
price: 1,
tprice: 1
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);

//end change code
}
}]
});

new Ext.Button({
renderTo: 'toggleSummary',
text: 'Toggle Summary',
handler: function(btn, e) {
summary.toggleSummary();
}
});
});
</script>
</head>
<body scroll="no"><!-- scroll="no" to remove IE's irritating scrollbar -->
<div id="grid-example"></div>
<br/>

<div id="toggleSummary"></div>
</body>
</html>

mystix
10 Mar 2009, 5:55 AM
your code contains errors -- you've defined a renderer config twice for the count column. if you had indented your code properly you'd be able to spot mistakes like that easily.

i copied and pasted your code, removed unused functions, and this is what i see:
http://extjs.com/forum/attachment.php?attachmentid=12413&stc=1&d=1236693268

using the following code:


<!DOCTYPE HTML>
<html>
<head>
<title>Ext.ux.grid.GridSummary Plugin Example</title>

<link rel="stylesheet" href="ext-all.css"/>

<script src="ext-base.js"></script>
<script src="ext-all-debug.js"></script>
<script src='Ext.ux.grid.GridSummary.js'></script>

<script>
Ext.override(Ext.data.Record, {
set : function(name, value, force) {
if (force !== true && String(this.data[name]) == String(value)) {
return;
}

this.setModified(name);
this.data[name] = value;
if (!this.editing && this.store) {
this.store.afterEdit(this);
}
},
setModified: function(name) {
this.dirty = true;
if (!this.modified) {
this.modified = {};
}
if (typeof this.modified[name] == 'undefined') {
this.modified[name] = this.data[name];
}
if (!this.editing && this.store) {
this.store.afterEdit(this);
}
}
});
Ext.util.Format.usMoney = function(v) { // override Ext.util.usMoney
v = Ext.num(v, 0); // ensure v is a valid numeric value, otherwise use 0 as a base (fixes $NaN.00 appearing in summaryRow when no records exist)
v = (Math.round((v - 0) * 100)) / 100;
v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
v = String(v);

var ps = v.split('.');
var whole = ps[0];
var sub = ps[1] ? '.' + ps[1] : '.00';
var r = /(\d+)(\d{3})/;

while (r.test(whole)) {
whole = whole.replace(r, '$1' + ',' + '$2');
}

v = whole + sub;

if (v.charAt(0) == '-') {
return '-$' + v.substr(1);
}

return v + " $";
};

Ext.onReady(function() {
Ext.QuickTips.init();

var myData = [
['3m Co',1,1,1],
['Alcoa Inc',1,1,1],
['Altria Group Inc',1,1,1],
];

// custom summary renderer example
function averageChange(v, params, data) {
params.attr = 'ext:qtip="Average % Change"'; // summary column tooltip example
return v ? ('Count: ' + v) : '';
}


// this could be inline, but we want to define the Company record
// type so we can add records dynamically
var Company = Ext.data.Record.create([
{name: 'company'},
{name: 'count', type: 'int'},
{name: 'price', type: 'float'},
{name: 'tprice',type: 'float'}
]);

// create the data store
var store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({
id: 0
}, Company)
});
store.loadData(myData);

var summary = new Ext.ux.grid.GridSummary();

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
renderTo: 'grid-example',
store: store,
columns: [
new Ext.grid.RowNumberer(),
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', summaryType: 'count'},
{header: "Count", width: 100, sortable: true, dataIndex: 'count', summaryType: 'sum', summaryRenderer: averageChange,
renderer: function(v, params, record) {
store.commitChanges();
return (record.data.tprice = record.data.count * record.data.price);
}
},
{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
{header: "Total Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'tprice', summaryType: 'sum',
editor: new Ext.form.NumberField({allowDecimals: true})
}
],
plugins: [summary], // have the EditorGridPanel use the GridSummary plugin
stripeRows: true,
height:350,
width:600,
// title:'Array Grid',

tbar: [{
text: 'Add Company',
handler : function() {
//change code
isNew = true;
grid.getStore().each(function(store) {
if ("Alcoa Inc" == store.data.company) {
//alert(store.data.company);
isNew = false;
for (i = 0; i < grid.store.getCount(); i++) {
var record = grid.store.getAt(i);
if (record.get('company') == "Alcoa Inc") {
record.set('count', store.data.count + 1, true);
record.commit(true);
}

}
}
});
if (isNew) {
var p = new Company({
company: 'Update [Alcoa Inc]',
price: 1,
change: 1,
pctChange: 100,
lastChange: (new Date()).clearTime()
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
//end change code
}
},{
text: 'Add New',
handler : function() {
var p = new Company({
company: 'New Company 1',
count: 1,
price: 1,
tprice: 1
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);

//end change code
}
}]
});

new Ext.Button({
renderTo: 'toggleSummary',
text: 'Toggle Summary',
handler: function(btn, e) {
summary.toggleSummary();
}
});
});
</script>
</head>
<body scroll="no"><!-- scroll="no" to remove IE's irritating scrollbar -->
<div id="grid-example"></div>
<br/>

<div id="toggleSummary"></div>
</body>
</html>


make sure you've grabbed the latest code from post #9, then retry your code.

dima
10 Mar 2009, 6:45 AM
Sorry for bad English: (yes, all good but if you increase the counter "Add company" does not increase Total

mystix
10 Mar 2009, 9:10 AM
Sorry for bad English: (yes, all good but if you increase the counter "Add company" does not increase Total

why won't you clean up your code first...

your record definition is


var Company = Ext.data.Record.create([
{name: 'company'},
{name: 'count', type: 'int'},
{name: 'price', type: 'float'},
{name: 'tprice',type: 'float'}
]);



and you're adding Company records like so:


if (isNew) {
var p = new Company({
company: 'Update [Alcoa Inc]',
price: 1,
change: 1,
pctChange: 100,
lastChange: (new Date()).clearTime()
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}


go figure. /:)

mystix
10 Mar 2009, 9:17 AM
wonderful. your code's so messy you didn't even circle the correct "Add" button in your screenshot.

your other "Add New" button has the following seemingly correct code:


,{
text: 'Add New',
handler : function() {
var p = new Company({
company: 'New Company 1',
count: 1,
price: 1,
tprice: 1
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);

//end change code
}
}


start debugging + cleaning up your code. remove all the unused code and simplify, simplify, simplify.

[edit]
i give up. debug your own code.
it's too messy. it's too convoluted. i have no idea what you're trying to do in your add record function.

mystix
10 Mar 2009, 6:28 PM
see my comments in red regarding your script:


/* what on earth is this override for???
Ext.override(Ext.data.Record, {
set : function(name, value, force) {
if (force !== true && String(this.data[name]) == String(value)) {
return;
}

this.setModified(name);
this.data[name] = value;
if (!this.editing && this.store) {
this.store.afterEdit(this);
}
},
setModified: function(name) {
this.dirty = true;
if (!this.modified) {
this.modified = {};
}
if (typeof this.modified[name] == 'undefined') {
this.modified[name] = this.data[name];
}
if (!this.editing && this.store) {
this.store.afterEdit(this);
}
}
});
*/
Ext.util.Format.usMoney = function(v) { // override Ext.util.usMoney
v = Ext.num(v, 0); // ensure v is a valid numeric value, otherwise use 0 as a base (fixes $NaN.00 appearing in summaryRow when no records exist)
v = (Math.round(v * 100)) / 100;
v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
v = String(v);

var ps = v.split('.');
var whole = ps[0];
var sub = ps[1] ? '.' + ps[1] : '.00';
var r = /(\d+)(\d{3})/;

while (r.test(whole)) {
whole = whole.replace(r, '$1' + ',' + '$2');
}

v = whole + sub;

if (v.charAt(0) == '-') {
return '-$' + v.substr(1);
}

return v + " $";
};

Ext.onReady(function() {
Ext.QuickTips.init();

var myData = [
['3m Co',1,1,1],
['Alcoa Inc',1,1,1],
['Altria Group Inc',1,1,1],
];

// this could be inline, but we want to define the Company record
// type so we can add records dynamically
var Company = Ext.data.Record.create([
{name: 'company'},
{name: 'count', type: 'int'},
{name: 'price', type: 'float'},
{name: 'tprice',type: 'float'}
]);

// create the data store
var store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({
id: 0
}, Company)
});
store.loadData(myData);

var summary = new Ext.ux.grid.GridSummary();

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
renderTo: 'grid-example',
store: store,
columns: [
new Ext.grid.RowNumberer(),
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', summaryType: 'count'},
{header: "Count", width: 100, sortable: true, dataIndex: 'count', summaryType: 'sum', summaryRenderer: function(v) {
return v ? ('Count: ' + v) : '';
}
/* it's a RENDERER -- it only FORMATS the value for display. why are you modifying record values in here???
renderer: function(v, params, record) {
store.commitChanges();
return (record.data.tprice = record.data.count * record.data.price);
}
*/
},
{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
{header: "Total Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'tprice', summaryType: 'sum', editor: new Ext.form.NumberField({allowDecimals: true})}
],
plugins: [summary],
stripeRows: true,
height:350,
width:600,

tbar: [{
text: 'Add Company',
handler : function() {
var isNew = true; // your isNew variable wasn't declared with "var"

grid.getStore().each(function(rec) {
if ("Alcoa Inc" == rec.get('company')) {
isNew = false;
// your "i" counter variable wasn't declared with "var"
for (var i = 0; i < grid.store.getCount(); i++) {
var record = grid.store.getAt(i);
if (record.get('company') == "Alcoa Inc") {
record.set('count', rec.get('count') + 1, true);
record.commit(true);
}
}
}
});

/* why did you include this block of code in your test case?!?!?! it doesn't demonstrate anything
if (isNew) { // isNew is always false since "Alcoa Inc" always exists
var p = new Company({
company: 'Update [Alcoa Inc]',
count: 1,
price: 1,
// your record fields don't even exist
// change: 1,
// pctChange: 100,
// lastChange: (new Date()).clearTime()
tprice: 1
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
*/
}
},{
text: 'Add New',
handler : function() {
var p = new Company({
company: 'New Company 1',
count: 1,
price: 1,
tprice: 1
});
grid.stopEditing();
store.insert(0, p);
grid.getView().refresh(); // update row numbering when a new record is added
grid.startEditing(0, 0);
}
}]
});

new Ext.Button({
renderTo: 'toggleSummary',
text: 'Toggle Summary',
handler: function(btn, e) {
summary.toggleSummary();
}
});
});

with this modified code, edit the "Total Price" column for the "Alcoa Inc" Company and watch the total increment correctly. click the "Add Company" button and watch the total for the "Count" column increment correctly too.

blame your messy code. /:)
and start cleaning it up.

Rafael
20 Mar 2009, 8:43 PM
Dont creat a row of total, why ?


var dsContratoContratado = new Ext.data.GroupingStore({
baseParams: { parametro: 'Contrato_Contrado_Cliente'},
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: 'select.php',
method: 'post'
}),
groupField:'codigo_contrato',
sortInfo:{field: 'codigo_contrato', direction: "ASC"},
reader: new Ext.data.JsonReader({
root:'resultado',
waitMsg:'Carregando...',
totalProperty: 'total',
id:'codigo_contrato'
},[
{name: 'linha', type: 'int'},
{name: 'codigo_contrato', mapping: 'codigo_contrato', type: 'int'},
{name: 'nome_contrato', mapping: 'nome_contrato', type: 'string'},
{name: 'contratado', mapping: 'contratado', type: 'bool'},
{name: 'quantidade', type: 'int'},
{name: 'valor_contrato', mapping: 'valor_contrato', type: 'float'},
{name: 'valor_total_contrato', mapping: 'valor_total_contrato', type: 'float'}
])
});

var summary = new Ext.ux.grid.GridSummary();




var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
id:'codigo_contrato',
header: "Código Contrato",
dataIndex: 'codigo_contrato',
width: 220,
sortable: true,
align: 'center',
hidden: true,
hideable : true,
summaryType: 'count',

},{
id:'nome_contrato',
header: "Nome do Contrato",
dataIndex: 'nome_contrato',
width: 220,
sortable: true,
type: 'string',
align: 'center',
hideable : true
},
contratado,
{
header: "Qtd",
id: 'quantidade',
align: 'center',
dataIndex: 'quantidade',
width: 50,
editor: new Ext.form.NumberField({
allowBlank: true,
allowNegative: false
})
},{
xtype: 'moneyfield',
header: "Valor Contrato",
id: 'valor_contrato',
dataIndex: 'valor_contrato',
sortable: true,
type: 'float',
align: 'center',
hideable : true,
width: 200
},{
header: "Valor Total Contrato",
id: 'valor_total_contrato',
type: 'float',
align: 'center',
width: 200,
renderer: function(v, params, record) {
var tot = Ext.util.Format.usMoney(record.data.quantidade * record.data.valor_contrato);
record.data.valor_total_contrato = tot;
return tot;
},
summaryType:'sum',

//renderer: Ext.util.Format.usMoney,
//summaryRenderer: totalContrato
}
]);

mystix
20 Mar 2009, 8:45 PM
@Rafael
compare your code with the drop-in example included in the zip (see post #9).
what's missing?

Rafael
20 Mar 2009, 8:52 PM
then, i comparate and dount found a diferences .

mystix
21 Mar 2009, 6:39 AM
then, i comparate and dount found a diferences .

something must be different. the example included in the zip works.

p.s. i noticed you're using a GroupingStore. that might be a reason.
i've never used this plugin with a GroupingStore before.

Rafael
21 Mar 2009, 7:44 AM
try this but dont show a row of total.
Dont have error !


var dsContratoContratado = new Ext.data.Store({
baseParams: { parametro: 'Contrato_Contrado_Cliente'},
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: 'select.php',
method: 'post'
}),
reader: new Ext.data.JsonReader({
root:'resultado',
totalProperty: 'total',
id:'codigo_contrato'
},[
{name: 'linha', type: 'int'},
{name: 'codigo_contrato', mapping: 'codigo_contrato', type: 'int'},
{name: 'nome_contrato', mapping: 'nome_contrato', type: 'string'},
{name: 'contratado', mapping: 'contratado', type: 'bool'},
{name: 'quantidade', type: 'int'},
{name: 'valor_contrato', mapping: 'valor_contrato', type: 'float'},
{name: 'valor_total_contrato', mapping: 'valor_total_contrato', type: 'float'}
])
});

mystix
21 Mar 2009, 7:47 AM
did you include the plugin in the GridPanel?


new Ext.grid.GridPanel({
plugins: [new Ext.ux.grid.GridSummary()]
});

Rafael
21 Mar 2009, 7:53 AM
in my code have this


var summary = new Ext.ux.grid.GridSummary();

var GR_Contrato_Contratado = new Ext.grid.EditorGridPanel({
store: dsContratoContratado,
width:600,
height:300,
title:'Contratos',
frame:true,
clicksToEdit:1,
plugins: [summary],

mystix
21 Mar 2009, 8:05 AM
does the example included in the zip work for you?

if it does, replace it one portion at a time with your own code until something breaks.

and one more thing: did you remember to include the required css?

start debugging.

Rafael
21 Mar 2009, 8:54 AM
i dont know to debugging.

mystix
21 Mar 2009, 10:22 AM
i dont know to debugging.

right. /:)

start debugging. step through your code.
start with the example and change the code a little bit at a time.

nobody's going to do your work for you.