Description
For the purposes of presentation, we very often need to provide data that are the result of a calculation or combination of other existing data. For example, we keep date of birth in the database but users want to see the age. So we take the existing data (DOB) and today’s date, make some calculations (subtract) and provide the resulting age for the user.
Temperature stored in database as ºF but shown to the user as ºC, stored kilometers shown as miles, full name as concatenation of stored first and last names are only few of the umpteen usages of the calculated data.
This example demonstrates how to use calculated data fields in ExtJS 5.
Main Features
- Full Name and Age are calculated
- calculations are implemented in model that is closest to the source data
- calculated values are available as model fields
- data can be edited in both grid and form
- form fields and grid editors are bound to model fields
- validators defined at the model level are used by form fields and grid editors
Use Case
Use this approach whenever you need secondary data derived from the data stored in a database. The secondary, calculated data can be used in exactly same way as model fields can be.
Example Files (relative to example root)
The example has been initially generated with sencha generate app in a workspace. The following list contains only the relevant files:
app/model/Base.js app/model/Person.js app/view/MainModel.js app/view/MainController.js app/view/PersonForm.js app/view/PersonGrid.jsIf you want to see the example code, login or sign-up. Free membership is available.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
