Change the color of summary row of grid in extjs

Question

I want to change the font as well as background color of the summary row of the grid.I have tried getting the summary row as :

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

Based on summaryRow I can set the style.But I am getting the value of summaryRow as null.Can anyone please point me to correct direction or am I missing something? Any help is appreciated.Thanks

Try grid.down('Ext.grid.feature.Summary') or grid.down('feature.Summary'). Summary is not a widget but a feature, therefore I am not sure about its xtype query. — Christoph, Jun 18 '13 at 12:23
It works fine now.Thanks!! Here is the code : var summaryRow = grid.getView().getFeature(0); summaryRow.view.el.setStyle(aStyleObject); — Dev, Jun 18 '13 at 13:04

score 2 · Answer 1 · answered May 27 '14 at 18:08

The documented way to do this would be the Summary Renderer, the best method for the summary renderer would be the tdCls or tdAttr properties:

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

You can also use the tdAttr version like this:

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

Note the first one would be using css classes, so you need to define the appropriate css classes in your css file :D

Dear @Jake I've been implemented this adustment but somehow it's not coloring! Why it's could be? — Nuri Engin, Feb 01 '18 at 07:18
Here is code snippet of column; `{xtype: 'currdebitcol', text: translations.dAmount, summaryType: 'sum', summaryRenderer: function (value, summaryData, dataIndex, rowIndex, colIndex, store, view) { if (value > 100) { summaryData.tdAttr = 'style="color: red;"'; } else if (value === 100) { summaryData.tdAttr = 'style="color: green;"'; } else { summaryData.tdAttr = 'style="color: yellow;"'; } return Ext.String.format('{0}', value); } },` — Nuri Engin, Feb 01 '18 at 07:20

score 1 · Accepted Answer · edited Jun 18 '13 at 13:34

1

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

edited Jun 18 '13 at 13:34

Dev

3,922
3
24
44

answered Jun 18 '13 at 13:13

Christoph

1,023
11
23

score 0 · Answer 3 · answered Jun 18 '13 at 12:28

You can use summaryRenderer function present in grid column to show the row in specific style.

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

score 0 · Answer 4 · answered Jul 10 '15 at 09:11

0

Or we can use CSS in specific page.

<style>
    .x-grid-row-summary .x-grid-cell{
        background-color: #f00 !important;
        font-size: x-large !important;
    }
</style>

answered Jul 10 '15 at 09:11

Muzaffer Galata

580
1
9
22

Change the color of summary row of grid in extjs

4 Answers4