Description
The same demo as Styling Grid Rows · Ext JS Classic — same nine people, same five buttons, same behavior — on the modern toolkit, where the hook it is built on does not exist.
getRowClass belongs to Ext.view.Table, and the modern toolkit has no Ext.view.Table. A modern grid is an Ext.dataview.List of Ext.grid.Row components, and there is no per-row styling hook anywhere in it. Declaring getRowClass on a modern grid does nothing at all — no warning, no error, just a config Ext keeps on the instance and never reads.
So this example adds one. About forty lines, overriding Ext.grid.Row, giving it the same name and the same four-argument contract the classic hook has:
With that in place, the decision itself is the same code on both toolkits. Compare the two demos' PersonGrid.js: the getRowClass body is identical, and only its placement differs — inside viewConfig in classic, a method on the grid here.
Try it
Click a row, then click a color. The color appears on the row that is still selected. Click another and it replaces the first; No Color clears it. Click the selected row again to deselect and all five buttons go dead.
Then sort by a column. Every color follows its person, and in this toolkit that is the interesting case — the rows are recycled components, so sorting hands this row's component somebody else's record and vice versa. Nothing bleeds across, which is the override's second job.
Open the classic version beside it: the two are the same demo, and the code that decides a color is the same code.