extjs/examples/kitchensink/classic/samples/view/binding/Formulas.js

   1 /**
   2  * This example shows data binding using formulas (calculated properties). This example
   3  * also demonstrates automatic dependency resolution between formulas that depend on each
   4  * other's values.
   5  */
   6 Ext.define('KitchenSink.view.binding.Formulas', {
   7     extend: 'Ext.panel.Panel',
   8     alias: 'widget.binding-formulas',
   9     //<example>
  10     otherContent: [{
  11         type: 'ViewModel',
  12         path: 'classic/samples/view/binding/FormulasModel.js'
  13     }],
  14     //</example>
  15
  16     title: 'View Model Formulas',
  17
  18     width: 370,
  19     bodyPadding: 10,
  20
  21     viewModel: {
  22         // Formulas are defined by the ViewModel:
  23         type: 'binding-formulas',
  24         data: {
  25             x: 10
  26         }
  27     },
  28
  29     items: [{
  30         xtype: 'numberfield',
  31         fieldLabel: 'Number',
  32         bind: '{x}'
  33     }, {
  34         xtype: 'displayfield',
  35         fieldLabel: 'Calculated',
  36         bind: '{x} * 2 = {twice} / {x} * 4 = {quad}'
  37     }]
  38 });