ExtJS 4 changing Grid row background color

Hello,

ExtJS’s grid system is really powerful module that for me is backbone of their framework. In this post I am going to show you a couple of methods you can use to change background colors of some random Grid rows.

First up is to define couple of CSS classes which we will make use of later in our code.

The CSS

[geshi lang="css" nums="1" target="_self" ]

Now that we have our CSS classes to play with and apply to our Grid rows, let me take you through a full example from creating a new simple Grid to applying styles.

The Markup

The Grid

We our Grid is ready and properly rendered on our page.

From here we can do few things. If we already know which rows to highlight that would be easy to do by using viewConfig property as shown below

Probably its a good thing that you override .x-grid-cell class definition and remove background-color property from it.

In the above code I am just putting my custom classes for odd and even rows. But you can see that I have access to record object, thus I can apply conditions based on the data on hand.

This is OK but what if you grid data is changed every 10 seconds and you are not sure which row to highlight with color red for example.

I will do that sort of handling on store.load event and will do something like this

We are doing a check on every store reload and changing the background color according to the new data. So just to simulate consider adding this code to test it

Above code will refresh our store after 3 seconds (once only). This method also give you granular control to stylize individual columns too.

 

Demo

http://jaspreetchahal.org/examples/extjs-grid-row-background-color.html

 

This is just my working solution. If you can come up with a better solution that would be nice. Please leave your comments with your solution.

I hope that this at least give you starting point to go ahead and explore more of ExtJS.

ExtJS version used in this post demo is ExtJS 4.1.1, I may update it without notice

Cheers

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)
ExtJS 4 changing Grid row background color, 5.0 out of 5 based on 1 rating

Comments

  1. Hi, Jasp!
    Do you know how to change row background with stripeRows config being set true. I mean, if the color of the row is default it is either gray or white depending on the stripe. But if the row color was changed, than it should override the stripe color. Is it possible?

    Best wishes,
    Victor

Speak Your Mind

*

CommentLuv badge