extjs/build/examples/kitchensink/modern/src/view/binding/Form.js

   1 Ext.define('KitchenSink.view.binding.Form', {
   2     extend: 'Ext.form.Panel',
   3
   4     //<example>
   5     requires: [
   6         'Ext.app.ViewModel'
   7     ],
   8     //</example>
   9
  10     viewModel: {
  11         data: {
  12             red: 255,
  13             green: 100,
  14             blue: 150
  15         }
  16     },
  17
  18     layout: 'vbox',
  19     scrollable: true,
  20
  21     items: {
  22         xtype: 'fieldset',
  23         flex: 1,
  24         minHeight: 400,
  25         defaultType: 'container',
  26         layout: 'vbox',
  27         instructions: [
  28             'The style of the color block is controlled by either the numeric ',
  29             'field or the slider. Both the numeric fields and the slider are bound to ',
  30             'the same value in the View Model.'
  31         ].join(''),
  32         items: [{
  33             layout: 'hbox',
  34             defaults: {
  35                 maxValue: 255,
  36                 minValue: 0
  37             },
  38             items: [{
  39                 xtype: 'numberfield',
  40                 label: 'Red',
  41                 labelWidth: '50%',
  42                 width: 150,
  43                 bind: '{red}'
  44             }, {
  45                 xtype: 'singlesliderfield',
  46                 flex: 1,
  47                 bind: '{red}',
  48                 liveUpdate: true
  49             }]
  50         }, {
  51             layout: 'hbox',
  52             defaults: {
  53                 maxValue: 255,
  54                 minValue: 0
  55             },
  56             items: [{
  57                 xtype: 'numberfield',
  58                 label: 'Green',
  59                 labelWidth: '50%',
  60                 width: 150,
  61                 bind: '{green}'
  62             }, {
  63                 xtype: 'singlesliderfield',
  64                 flex: 1,
  65                 bind: '{green}',
  66                 liveUpdate: true
  67             }]
  68         }, {
  69             layout: 'hbox',
  70             defaults: {
  71                 maxValue: 255,
  72                 minValue: 0
  73             },
  74             items: [{
  75                 xtype: 'numberfield',
  76                 label: 'Blue',
  77                 labelWidth: '50%',
  78                 width: 150,
  79                 bind: '{blue}'
  80             }, {
  81                 xtype: 'singlesliderfield',
  82                 flex: 1,
  83                 bind: '{blue}',
  84                 liveUpdate: true
  85             }]
  86         }, {
  87             xtype: 'component',
  88             flex: 1,
  89             bind: {
  90                 style: {
  91                     backgroundColor: 'rgba({red}, {green}, {blue}, 1)'
  92                 }
  93             }
  94         }]
  95     }
  96 });