JavaScript
HTML
Run Code
Open in Fiddle
Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ width: 420, height: 200, title: 'Difference between setValue() and setRawValue() (Event "Change")', bodyPadding: 10, layout: 'anchor', defaults:{ labelWidth: 100, anchor: '100%', }, items: [ { xtype: 'label', text: 'Use setValue', style:{ fontWeight: 700, }, },{ xtype: 'textfield', fieldLabel: 'First field', cls: 'field1', listeners: { change: function(field, newValue, oldValue){ var second_field = field.next('[cls=field2]'); second_field.setValue( parseInt(newValue) + 1 ); }, } },{ xtype: 'textfield', fieldLabel: 'Second field', cls: 'field2', listeners: { change: function(field, newValue, oldValue){ var first_field = field.prev('[cls=field1]'); first_field.setValue( parseInt(newValue) - 2 ); }, }, },{ xtype: 'label', text: 'Use setRawValue', style:{ fontWeight: 700, }, margin: '10 0 5', },{ xtype: 'textfield', fieldLabel: 'First field', cls: 'field3', listeners: { change: function(field, newValue, oldValue){ var second_field = field.next('[cls=field4]'); second_field.setRawValue( parseInt(newValue) + 1 ); }, } },{ xtype: 'textfield', fieldLabel: 'Second field', cls: 'field4', listeners: { change: function(field, newValue, oldValue){ var first_field = field.prev('[cls=field3]'); first_field.setRawValue( parseInt(newValue) - 2 ); }, }, } ], renderTo: 'input', }); })