In Ext JS how to set color of the selected row and alternate rows in the grid

In any UI grid you would like to have a different background color of the selected row so that user knows which is the currently selected row. Similarly you would want to have different background shades for alternate rows so that grid looks a bit appealing. In Ext js we tweak the applied CSS to achieve these desired effects.

Suppose DIV ID of your grids is DIV_ID. In Ext 4 we used to set this CSS for each column to achieve different background color for alternate rows

#DIV_ID x-grid-row-alt x-grid-cell-COLUMNENAME { BACKGROUND-COLOR : GREEN }

In EXT JS 6 internal structure of CSS has changed. Now we can set the new style on the entire rows like this :

#DIV_ID .x-grid-with-row-lines .x-grid-item.x-grid-item-alt { BACKGROUND-COLOR : GREEN }

Similarly to set background color of the selected row we used to apply this CSS in EXT JS 4

#DIV_ID .x-grid-row-selected x-grid-cell-COLUMNENAME { BACKGROUND-COLOR : GREEN }

In EXT 6 we need to do this :

#DIV_ID .x-grid-with-row-lines .x-grid-item.x-grid-item-selected { BACKGROUND-COLOR : GREEN }

Uday Ogra

Connect with me at http://facebook.com/tendulkarogra and lets have some healthy discussion :)

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *