Description
Pick a row, pick a color, and the row changes. What is worth looking at is what the code does not do to make that happen: nothing here touches a row, adds a class, or asks the grid to repaint.
The button handler sets a field on the record. That is all it does. The grid re-renders the row because its record changed, and on the way through it calls getRowClass and asks what class the row should carry now.
Ext.view.Table#getRowClass has been in ExtJS since version 3 and is still here in ExtJS 8. It is called once per row as the view renders it, and the string it returns is added to that row's element:
How a row should look is a property of the data, not a step in a handler. Everything else follows from that: the color survives a sort, a filter, a scroll and a re-render, because none of those change the record. Nothing has to remember to reapply it. Two grids over the same store agree without talking to each other.
This is the classic toolkit half of a pair. Beside it sits Styling Grid Rows · Ext JS Modern, which is the same demo with the same nine people and the same five buttons on the modern toolkit — where getRowClass does not exist, and one override supplies it. The two behave identically, and that is checked rather than claimed: their test suites are one shared source run against both.
It is built on ExtJS 8, an upgrade of the 2014 original, which it replaces.
Try it
Click a row, then click a color. The color appears on the row that is still selected — the selection does not hide it. Click another color and it replaces the first rather than adding to it, because there is one field, not a list of classes. No Color clears it. Click the selected row again to deselect, and all five buttons go dead.
Then click a column header to sort. Every color follows its person up or down the grid, and nothing reapplied it — the class is a function of the record, and the record moved. Press Open in Window for a second copy: it loads the store again and starts with no colors at all, so you can see the two are independent.