Question

I am using the Extjs4 multigrouping plugin from here.

I have used it successfully, however i want to show the summary of the totals of each column within the group header itself . how do i set up the appropriate CSS for that ?

In Multigrouping.js

getFragmentTpl: function() {
    var me = this;
    return {
        indentByDepth: me.indentByDepth,
        depthToIndent: me.depthToIndent,
        renderGroupHeaderTpl: function(values, parent) {
     return Ext.XTemplate.getTpl(me, 'groupHeaderTpl').apply(values, parent);
            //var z = new Ext.XTemplate('{name} ({rows.grouplength})');
            //return z.apply(values, parent);
        }
    };
},

In my grid

features: [ 
    {
        ftype:'multigrouping',
        groupHeaderTpl: [
                         '{[this.readOut(values)]}',
                         {
                             readOut:function(values) {
                                 debugger;
                                 var sum1 =0 ,sum2=0,sum3=0;
                                    for( var i = 0 ; i< values.records.length ; i++)
                                        {
                                            var val = parseFloat(values.records[i].data.d2012.mp);
                                            sum1 += isNaN(val) ? 0.0 : val;
                                            val = parseFloat(values.records[i].data.d2013.mp);
                                            sum2 += isNaN(val) ? 0.0 : val;
                                            val = parseFloat(values.records[i].data.d2014.mp);
                                            sum3 += isNaN(val) ? 0.0 : val;

                                        }
                                    return values.name +  '(' + values.records.length + ')' +  ' ' + sum1.toFixed(2) + '            ' + sum2.toFixed(2) + '           ' + sum3.toFixed(2);
                                }
                         }
                     ]

    },

Answer 1

had to resort to a few hacks to get this to work. still waiting on an official answer.
The main reason i had to do this and not use the multigrouping summary is because
– i want to limit the number of records from the server. I can do some smart grouping of
my business objects at the server side.
– the main reason to do this is because of IE8’s performance on larger sets of data.
– had already tried the extjs4 tree grid component which works well on chrome but had performance issues on IE8.

the hack is to
a) use an array property in the grid to store the dom elements which i want to manipulate
b) use a boolean to know when the layout is completed the first time
b) add listeners for afterlayout ( when your app can do an Ext.get(‘..dom element..’) you know you are done )

The listener :

listeners : 
{
 afterlayout : function(eopts)
 {
     var x = this.mOwnArray;
     if(!this.loadedwithVals && x.length > 0)
         {
    for(var i =0 ; i<x.length ; i++)
        {
            var dom = Ext.get(x[i].id);
            var theId = dom.id;
            theId = theId.match(/\d+/)[0];
            var title = dom.query("td[class='x-grid-cell x-grid-cell-first']");
            title[0].className = 'x-grid-cell x-grid-cell-gridcolumn-' + theId + ' x-grid-cell-first';
            title[0].colSpan=1;
            var groupedHeader = dom.query("div[class='x-grid-group-title']");
            groupedHeader[0].innerHTML =  x[i].name + '(' + x[i].length + ')';
            for(var year=2012;year<=2018;year++)
                {
                var t = "t"+year;
                var someText1 = '<td class=" x-grid-cell x-grid-cell-numbercolumn">';
                var someText2 = '<div class="x-grid-cell-inner " style="text-align: left; ;">';
                var someText3 = '<div class="x-grid-group-title">' + x[i].total[t] + '</div></div></td>';
                var someText = someText1 + someText2 + someText3;
                dom.insertHtml("beforeEnd",someText);   
                }
        }
            this.loadedwithVals = true;
     }
}

And the feature as in

features: [ 
    {
        ftype:'multigrouping',
        startCollapsed : true,
        groupHeaderTpl: [
                         '{[this.readOut(values)]}',
                         {
                             readOut:function(values) {
                                 var header = new Object();
                                 header.id = values.groupHeaderId;
                                 header.sum = [];
                                 header.total = new Object();
                                 for(var year = 2012 ; year <= 2018 ; year++)
                                     {
                                        var t = "t"+year;
                                        header.total[t] = [];
                                     }
                                 // all the records in this header
                                    for( var i = 0 ; i< values.records.length ; i++)
                                        {
                                            // for all the 'years' in this record
                                            for(var year=2012;year<=2018;year++)
                                                {
                                                    var d = "d"+year;
                                                    var ct = "t" + year;
                                                    var arecord = values.records[i].data;
                                                    var val = parseFloat(arecord[d].mp);
                                                    val = isNaN(val) ? 0.0 : val;
                                                    Ext.Array.push(header.total[ct],val);
                                                }
                                        }
                                // push the sum of the records into its top level group
                                         for(var year = 2012 ; year <= 2018 ; year++)
                                         {
                                            var t = "t"+year;
                                            var sum = Ext.Array.sum(header.total[t]);
                                            header.total[t] = sum.toFixed(2);
                                         }
                                 header.name = values.name;
                                 header.length = values.records.length;
                                 var headerName = values.name;
                                 if(values.hasOwnProperty('parent'))
                                     {
                                        var parent = values.parent;
                                        headerName = headerName.replace(parent,'');
                                     }
                                 header.name = headerName;
                                 header.length = values.records.length;
                                 Ext.Array.push(grid.mOwnArray,header);
                                 // really not used
                                return values.name +  '(' + values.records.length + ')';
                                }
                         }
                     ]

    },
]