Description
A paged, cell-editable grid of companies whose City column is a foreign key into 22 387 cities, searched on the server as you type. Type two characters and the dropdown fetches ten matches; page through them with its own pager; pick one and the cell shows the new city immediately. Save sends every edited row in a single request.
This is Saki's June 2014 example, brought up to ExtJS 8 on the modern toolkit. The lesson is unchanged, because it was never "a combo in a grid" — it is the foreign-key display problem, and the answer is on the server. The list query left-joins the cities table and delivers cityName beside cityId, so the column can be bound to the key it actually edits and still show a name: the value is cityId, the display value is cityName, and both arrive on the same record. The renderer only has to pick the name up from the row it is already drawing — it never reaches into the combo's store, so the browser never holds 22 387 rows and nothing ever shows "unknown (5128581)" while a store is still loading.
It is also the origin of four ports built to the same behavior contract — React, Vue, Angular and Svelte are upcoming. All five will talk to the same endpoint, each against its own database, so any two can be opened side by side showing the same screen.
Try it
Double-click a City cell and type at least two characters — san matches 633 cities, so the dropdown's pager will read 1 / 64. Page through them, pick one, and watch the cell repaint and the corner marker appear. It works without the mouse: hold Down past the last row and the list turns to the next page rather than stopping. Then type a city that does not exist and Tab away: the cell keeps the city it had, and a line under the grid says why. Empty the cell instead and the company simply has no city — that is a value the column allows, so it is an edit like any other. Try to sort or page the grid while an edit is pending: both are locked until you Save or Reset. Sort by clicking a header — that is the server reordering all thirty-one rows, not the fifteen on screen.
The demo writes to a real database, so Reset demo data is there to put the thirty-one companies back.