Dynamically Set Class/Style of a Grid Row

Eric 提出了在 ExtJS Grid 中根据不同条件更改行样式的请求。具体来说，当记录状态为“未读”时，希望以加粗和稍大的字体显示；而“已读”记录则使用正常字体。解决方案包括在 GridView 中实现 getRowClass 方法，根据记录的数据返回不同的 CSS 类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Howdy,

I just recently began playing around with Ext and YUI, this is some great stuff! :-)

I have a grid, and based on whether one of the columns in the dataset is marked 'true' or 'false', I'd like to be able to modify the style of the entire row. Any thoughts on the best way to do that?

Some more details --

I have a grid that's pulling in data from a database. Each row has a status flag of either "seen" or "unseen", based on whether or not the user has seen the data associated with that given row.

If a user clicks a row in the grid, it goes out and pulls down some additional information that gets displayed somewhere else on the page. At this point, the record is now "seen".

What I'd like to do is have "unseen" records display in bold and slightly large size, and "seen" records display in a normal font.

Now, in the ColumnModel, I see a way to statically set an id for a given cell, but I haven't run across a way to do so dynamically (based on the contents of a given cell as the data is being loaded). It may also be preferable to be able to set a style or class rather than id (since they aren't unique), and to do so for the entire row rather than just a cell.

Is there a recommended way of going about that?

Thanks in advance!
-Eric

03-09-2007, 07:32 PM

Currently you would have to add the css class to each cell using the template parameters object passed as the second parameter.

Since this is a common pattern, I have added a new optional function to the GridView called getRowClass that can return a css class (or classes) to apply to a row. e.g.

var view = new Ext.grid.GridView({
getRowClass : function(record, rowIndex){
if(record.data.unread){
return "unread-row";
}
}
});

var grid = new Ext.grid.Grid({
....
view : view
});

This will be in the next revision.

Also, for convenience, I added a function refreshRow(record) to GridView. Record can either be the record object, or index in the store.

When you mark your records as read, you can call record.set('unread', false); and it will automatically trigger the refresh though.