View Full Version : How to bold a particular row of the grid in ext js

22 Jan 2013, 11:52 PM
Hi ,

We have a requirement to set one particular row(s) of a grid in ext js to be set as bold. We searched for the grid options, but could not find a solution to it.
How can we achieve this?


23 Jan 2013, 7:56 AM
you can do it using css. you need to get hold of the record(s). Here I am using the last record of the store as an example:

grid.getView().addRowCls(store.last(), 'boldFont');

in your css file:

.boldFont { font-weight:bold; !important; }

to remove the bold effect:

grid.getView().removeRowCls(store.last(), 'boldFont');

23 Jan 2013, 8:44 AM
If it should be dependent on value in the record you can use the getRowClass method.

viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
return record.get("valid") ? "row-valid" : "row-error";

See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.Table-method-getRowClass.