Description
Five columns over four people, and two of them are stored nowhere. Full Name is the first and last name joined; Age is worked out from the date of birth and today's date. Neither is ever assigned anywhere in the application: they are calculated model fields, and Ext.data.Model re-runs each calculation whenever a field it reads changes.
That is the whole point, and it is why this is a model example rather than a grid one. A grid column, a panel header, a form title and a validator all bind to a calculated value exactly the way they bind to a stored one — so the calculation is written once, next to the data, and every view that exists now or is written later gets it for nothing.
The cases are everywhere: a date of birth kept in the database and an age shown to the user; a temperature stored in °F and read in °C; kilometres stored and miles displayed; a full name that is two columns in the table and one label on the screen.
It is built on ExtJS 8, the modern toolkit — an upgrade of the original calculated-fields example, which it replaces.
Try it
Pick a row and watch both headers. Double-click First Name or Last Name and type: Full Name changes while the caret is still in the cell, because the editor is bound and the model recalculates on every change. Change Born and Age follows the same way. Type a one-character last name and Commit goes dead while Reject stays live — that is the model's validator, not the form's. Press New for an empty row with its first cell already open, and Tab across it. Reject puts a 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 panels stack.