Description
A paged, cell-editable grid of companies with Add, Remove, Save and Reset — and a logger window that narrates what the framework is doing while you use them. Add a row and it appears at the top with its name already open for typing. Remove one and it disappears from the page. Edit a cell and it picks up the corner triangle. None of it has reached the server yet.
This is Saki's May 2014 example, brought up to ExtJS 8 on the modern toolkit. The subject is not CRUD — it is the lifecycle of pending work. An edit, an addition and a removal are all pending until Save; the store is dirty while any of the three exists; and while it is dirty the grid will not sort and will not page. That refusal is the example. Both actions re-read from the server, and a fresh page would quietly replace the rows your changes were sitting in.
The other half of the lesson is that "dirty" is three things, not one. A modified record, a record added but never saved, and a record removed but never sent all count — miss any of them and Save is greyed out over work a visitor can see on screen.
It is also the original four ports answer to. The same behavior contract is implemented in React and, from release 8, in Vue, Angular and Svelte — each on the same headless table library and each against its own database — so any two can be opened side by side and driven through the same steps, which is the only honest way to see what a framework's grid does for you and what it does not.
Its other sibling, Remote Combo in Grid, is the same author's other grid on the same endpoint. The two are deliberately kept apart: that one is about a foreign key whose display value the server joins in, and it has a City column this one does not.