Styling ExtJS grid rows using getRowClass()


The example shows how to use Ext.grid.View method getRowClass to style individual rows or the grid. Here we change only grid background color but it is possible to change the font weight (bold/normal), font color or other attributes.

Main Features

  • implements getRowClass
  • uses data from static JSON file
  • uses MVC with model, proxy, reader, store, view and controller
  • uses SASS to create CSS needed for grid rows colors
  • uses CSS3 to create “icons” for buttons
  • plays well with any other grid extension, plugin or feature
  • any number of grid instances can be created

Use Cases

Use it anytime when you need to distinguish a grid row from others, for example, when a row is new or dirty, or when it requires attention for any reason.

Do not use it when you need to style individual grid cells.

Example Files (relative to example root)

The example has been initially generated with sencha generate app so the following list contains only added or edited files:

Source Code

If you want to see the example code, login or sign-up. Free membership is available.


Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)


      • Kazio Kazicki says

        Be so kind as to forgive me if my post isn’t proper. I’m looking in the net for info about ExtJS grid operations specially color rows and cells, that’s why I found your site.
        And if I can answer – I have to color rows but it couldn’t be by CSS notations. I read color codes from db table (just RGB notation, e.g. FF0000) and I must use this codes to color grid rows. But, as for now, I can’t do it and also can’t find any info on net.
        Would you be so kind as to prompt me something in such a case?

We will be happy to hear back from you

Please Login to post a comment