Results 1 to 3 of 3

Thread: Dynamically Set Class/Style of a Grid Row

  1. #1

    Default Dynamically Set Class/Style of a Grid Row


    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!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    New York, NY


    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){
    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.

  3. #3


    thanks Jack
    nice trick it helps me too

Similar Threads

  1. Access grid's table cell's style/class
    By Belgabor in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Apr 2008, 10:26 AM
  2. YAHOO.ext.ContentPanel own style class ?
    By antonfunk in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 8 Mar 2007, 10:43 AM
  3. Load all grid parameters from server dynamically.
    By orhant in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 14 Jan 2007, 10:37 AM
  4. how to populate grid with java list dynamically
    By sayeed in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 28 Dec 2006, 4:19 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts