Skip to content

May 3, 2011

3

Change ExtJS Grid rows’ background color without using CSS class

by Joe Kuan

If you need to change a row’s background color in ExtJS Grid Panel without using any CSS class, you can do it like this

var grid = new Ext.grid.GridPanel({
  ...
  viewConfig: {
     getRowClass: function(record, index, rowParams, ds) {
         rowParams.tstyle = 'width:' + this.getTotalWidth() + ';';
         if (set_background) {
           rowParams.tstyle += "background-color:" + bgColor + ';';
         }
         if (set_foreground) {
           rowParams.tstyle += "color:" + fgColor + ';';
         }
     }
  }
});
3 Comments Post a comment
  1. Dec 12 2013

    hey dude
    thanks for the pro-tip
    take care

    Reply
  2. May 18 2014

    thanks for your tip!

    Reply
  3. Jul 16 2015

    This is old artricle but I have such a problem now, that’s why I found your article. But in ExtJS 4.x I can’t use your suggestion. What should return getRowClass function? I found this function can return only pointer to CSS.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: