extjs - extjs でグリッドの集計行の色を変更する

Question

グリッドの集計行のフォントと背景色を変更したい.集計行を次のように取得しようとしました:

var summaryRow = grid.view.el.down('tr.x-grid-row-summary');

summaryRow に基づいてスタイルを設定できます。しかし、summaryRow の値をnullとして取得しています。誰かが正しい方向を教えてくれますか、それとも何か不足していますか? どんな助けでも大歓迎です.Thanks

Answer 1

これを行う文書化された方法はサマリー レンダラーです。サマリー レンダラーの最適な方法は tdCls または tdAttr プロパティです。

                    text: 'Allocation %',
                    xtype: 'numbercolumn',
                    format: '00.00%',
                    dataIndex: 'allocationAmount',
                    summaryType: 'sum',
                    summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) {

                        if (value > 100)
                        {
                            summaryData.tdCls = 'text-warning-high'
                        } else if (value === 100)
                        {
                            summaryData.tdCls = 'text-successful';
                        } else {
                            summaryData.tdCls = 'text-warning-low';
                        }
                        return Ext.String.format('Total: {0}%', value);
                    },

次のように tdAttr バージョンを使用することもできます。

 summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) {
                        if (value > 100)
                        {
                            summaryData.tdAttr = 'style="color: #ff0000"';
                        } else if (value === 100)
                        {
                            summaryData.tdAttr = 'style="color: green;"';
                        } else {
                            summaryData.tdAttr = 'style="color: yellow;"';
                        }
                        return Ext.String.format('Total: {0}%', value);
                    },

最初のものはcssクラスを使用することに注意してください。そのため、cssファイルで適切なcssクラスを定義する必要があります:D

Answer 2

var summaryRow = grid.getView().getFeature(0); 
styleObj = {
     'background-color': '#c5c5c5'  
 };
summaryRow.view.el.setStyle(styleObj);

Answer 3

グリッド列にある summaryRenderer 関数を使用して、行を特定のスタイルで表示できます。

Ext.create('Ext.grid.Panel', {
    width: 200,
    height: 140,
    renderTo: document.body,
    features: [{
        ftype: 'summary'
    }],
    store: {
        model: 'TestResult',
        data: [{
            student: 'Student 1',
            mark: 84
        },{
            student: 'Student 2',
            mark: 72
        },{
            student: 'Student 3',
            mark: 96
        },{
            student: 'Student 4',
            mark: 68
        }]
    },
    columns: [{
        dataIndex: 'student',
        text: 'Name',
        summaryType: 'count',
        summaryRenderer: function(value, summaryData, dataIndex) {
            return "<font color='red'>"+value+"<font>"; 
        }
    }, {
        dataIndex: 'mark',
        text: 'Mark',
        summaryType: 'average'
    }]
});