How do I add a class to one cell of the grid generated by the Summary feature?

Question

After creating a grid with the Summary feature , I'm able to access the summary of my columns by getting the feature and accessing properties associated with the feature:

// inside the grid definition with two columns 
// that access dataIndex 'count1' and 'count2'
listeners: {
    viewready: function(grid) {
        var summaryRow = grid.getView().getFeature(0).summaryRecord.data;
        console.log(summaryRow.count1);
        console.log(summaryRow.count2);
    }
}

I'd like to add a 'tot-count1' class to the cell representing summaryRow.count1 , and a 'tot-count2' class to the cell representing summaryRow.count2 .

It seems that usually ExtJS developers only fuss over applying a class to an entire row of the grid. If I only wanted to select the plugin's row, all I'd need to do would be to Ext.dom.Query.select('.x-grid-row-summary' ... which returns an HTMLElement when I want a Ext.dom.Element in order to take advantage of Ext.dom.AbstractElement's addCls() method.

I'm thinking of something along the lines of:

// get the Ext.dom.Element representing the cell
var cell1 = ???
// call the addCls method
cell1.addCls('tot-count1');

Answer 1

I used to use the summaryRenderer function that is set in a column configuration.

Ext.define(..., {
    columns: [{
        header: 'blah-blah',
        dataIndex: 'foo',
        summaryType: 'sum',

        summaryRenderer: function (value) {
            return Ext.String.format('<span class={0}>{1}</span>', 'tot-count1', value);
        }
    }],

    features: [{
        ftype: 'summary'
    }]
});