css - Extjs4 多组 header value css

Question

我正在使用来自 here 的 Extjs4 多组插件.

我已成功使用它，但我想在组标题本身中显示每列总计的摘要。我该如何为此设置适当的 CSS？

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

在我的网格中

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

不得不求助于一些技巧才能让它发挥作用。还在等官方答复。我不得不这样做而不使用多组摘要的主要原因是因为 - 我想限制来自服务器的记录数。我可以做一些聪明的分组 我在服务器端的业务对象。 - 这样做的主要原因是因为 IE8 在更大数据集上的性能。 - 已经尝试过 extjs4 树形网格组件，它在 chrome 上运行良好，但在 IE8 上存在性能问题。

黑客是为了a) 在网格中使用数组属性来存储我想要操作的 dom 元素b) 使用一个 bool 值来知道布局第一次完成的时间b) 为 afterlayout 添加监听器(当你的应用程序可以执行 Ext.get('..dom element..') 你知道你已经完成了)

听众:

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

和

中的功能

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 + ')';
                                }
                         }
                     ]

    },
]