Description
Four panels over one shared record: an editable grid, a form, a card list and a read-only detail panel. Pick a person in the grid or in the cards and all four agree at once; edit the record and every panel that shows it follows. Reject puts the committed values back; Commit makes the current ones committed — at the record level, and for the whole store.
This is an ExtJS 8 rewrite, on the modern toolkit, of Saki's earlier ExtJS 4 and 5 data-binding examples. It keeps what the ExtJS 5 version set out to show: what an ExtJS ViewModel actually is — one cell of shared state, with the views as projections of it. The classes have the same names and the same responsibilities; what changed is the toolkit under them.
Ports of this example to React, Angular, Vue and Svelte are upcoming — same behavior contract, same seed data, so any of them can be opened beside this one showing the same screen.
Try it
Pick a row, then watch the other three panels. Double-click a grid cell to edit it in place, or use the form — the other panels follow while you are still typing, and the edited cell keeps a red corner until it is rejected or committed. Press New: an empty record appears at the top with its First Name cell already open for editing, and Tab carries you across Last Name and Age. Reject puts the record back and Commit keeps it; Reject All and Commit All do the same for every record at once. Narrow the window below 700px and the two columns stack into one.