How to change the text color of only one row in an ExtJS grid?

Question

I've created the following ExtJS grid.

I want to change the text color of all the cells in the second row.

However, I can only find out how to change the color of all cells in all rows including the header text, as show here:

var myData = [
    [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, 3.0, '2010-11-17 08:31:12'],
    [16, 'Computer2-this row should be red', 0.28, 2.7, '2010-11-14 08:31:12'],
    [5, 'Network1', 0.02, 2.5, '2010-11-12 08:31:12'],
    [1, 'Network2', 0.01, 4.1, '2010-11-11 08:31:12'],
    [12, 'Other', 0.42, 5.0, '2010-11-04 08:31:12']
];

var myReader = new Ext.data.ArrayReader({}, [{
        name: 'id',
        type: 'int'
    }, {
        name: 'object',
        type: 'object'
    }, {
        name: 'status',
        type: 'float'
    }, {
        name: 'rank',
        type: 'float'
    }, {
        name: 'lastChange',
        type: 'date',
        dateFormat: 'Y-m-d H:i:s'
    }]);

var grid = new Ext.grid.GridPanel({
    region: 'center',
    style: 'color:red', //makes ALL text in grid red, I only want one row to be red
    store: new Ext.data.Store({
        data: myData,
        reader: myReader
    }),
    columns: [{
            header: 'ID',
            width: 50,
            sortable: true,
            dataIndex: 'id',

            hidden: false

        }, {
            header: 'Object',
            width: 120,
            sortable: true,
            dataIndex: 'object',
            renderer: columnWrap

        }, {
            header: 'Status',
            width: 90,
            sortable: true,
            dataIndex: 'status'
        }, {
            header: 'Rank',
            width: 90,
            sortable: true,
            dataIndex: 'rank'
        }, {
            header: 'Last Updated',
            width: 120,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
            dataIndex: 'lastChange'
        }],
    viewConfig: {
        forceFit: true
    },
    title: 'Computer Information',
    width: 500,
    autoHeight: true,
    frame: true,
    listeners: {
        'rowdblclick': function(grid, index, rec){
            var id = grid.getSelectionModel().getSelected().json[0];
            go_to_page('edit_item', 'id=' + id);
        }
    }
});

What do I have to do to change the text color of only the cells in the second row?

Answer 1

You want to override getRowClass, which is passed into the GridPanel's viewConfig. An example is provided in GridPanel's API docs:

   viewConfig: {
        forceFit: true,

   //   Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },

GridView contains the method, so look there in the API for more information:

getRowClass( Record record, Number index, Object rowParams, Store store )

Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters to the row template for the current row to customize how it is rendered using the rowParams parameter. This function should return the CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string (e.g., 'my-class another-class').

You can apply the CSS to a certain row by using the index argument.

Answer 2

not sure if this helps, but you can try. I tried locally, it does change the color of all the characters in 2nd row.

Add listener to the grid:

listeners:{
    viewready: function(g){
        g.getView().getRow(1).style.color="#f30";
    }
}

"When viewready, you can get the row's div by using getRow() method from GridView. After that is normal Javascript of assigning colors (or adding extra class, if you want)

Cheers

EDIT

I realize it's not working if your store is retrieving data remotely. View is ready but data is not ready. This method would fail.