Using Calculated Fields in ExtJS 5


This example has been written for and works is ExtJS 5.x.
If you need it for Ext 4.x see this blog post.

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.

Open example in new window.

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:

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)

We will be happy to hear back from you

Please Login to post a comment