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.
This is the build the other four answer to. The same grid is rebuilt in React, Vue, Angular and Svelte, each with its own database, so you can open any two side by side and try the same steps — which is the honest way to see what a framework's grid does for you and what it leaves to you.
Its other sibling, Remote Combo in Grid, is the same author's other grid on the same endpoint. That one is about a foreign key whose display value the server joins in.