1

ここから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);
                                }
                         }
                     ]

    },
4

1 に答える 1

0

これを機能させるには、いくつかのハックに頼らなければなりませんでした。まだ公式の回答を待っています。マルチグループ化の要約を使用せずにこれを実行しなければならなかった主な理由は、サーバーからのレコード数を制限したいからです。サーバー側でビジネスオブジェクトのスマートなグループ化を行うことができます。-これを行う主な理由は、より大きなデータセットでのIE8のパフォーマンスのためです。-Chromeではうまく機能するextjs4ツリーグリッドコンポーネントをすでに試していましたが、IE8ではパフォーマンスの問題がありました。

ハックは、a）グリッド内の配列プロパティを使用して操作したいdom要素を格納するb）ブール値を使用してレイアウトが最初に完了したときを知るb）アフターレイアウト用のリスナーを追加する（アプリで実行できる場合） 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 + ')';
                                }
                         }
                     ]

    },
]
于 2012-10-12T19:28:16.957 に答える