How to write Javascript in groupTextTpl of groupview?

[showker]

I have a groupview like this:
new Ext.grid.GroupingView({
forceFit:true,
itemSelector: 'totalEffectPv',
groupTextTpl: '{text} ( {["TotalOfThisGroup："]} {[values.rs[0].data.totalEffectPv])'
frame:true,
collapsible: true,
animCollapse: false,
width:700,
height:280
});
I can get the first row of each group which will show in the groupTextTpl.But now I want to show the total of the "totalEffectPv" field (not the row count).For example the ‘totalEffectPv' of the first group is
10
20
30
Now I want the groupTextTpl=60. So I try a js loop in the "groupTextTpl" like this:
groupTextTpl: '{text} ( {["TotalOfThisGroup："]} {[var total;for(var i in values.rs) {total=i.data.totalEffectPv;total++;} return total;}])'

But this doesn't work.So how can i write this js????where to write?

[Condor]

You can specify a full XTemplate in startGroup instead of only a string in groupTextTpl, e.g.

startGroup: new Ext.XTemplate(
  '<div id="{groupId}" class="x-grid-group {cls}">',
  '<div id="{groupId}-hd" class="x-grid-group-hd" style="{style}"><div class="x-grid-group-title">',
  '{text} (total: {this.calcTotal})',
  '</div></div><div id="{groupId}-bd" class="x-grid-group-body">',
  {
    calcTotal: function(values){
      for(var sum = 0, i = 0, len = values.rs.length; i < len; i++){
        sum += values.rs[i].get('totalEffectPv');
      }
      return sum;
    }
  }
)

[carol.ext]

Create a function outside of the template to do the summing and call the function in the "code" part of the template, passing the data in (values.rs). Make sure the function is visible when it is needed.

Also, for in type loop not recommended.