ExtJS - Change field value without firing the "change" event - extjs

Question

I'm writing a function in a ViewController which will reset all of the fields in a complex View. This view is using ExtJS 5 two-way data binding with a ViewModel. That's how I'm reseting the fields:
clearFields: function() {
var vm = this.getViewModel();
vm.set('name', '');
vm.set('address', '');
vm.set('port', '');
vm.set('active', false);
vm.set('dynamic', false);
vm.set('bandwidthOptimization', true);
vm.set('reverse', false);
vm.set('timeout', 60);
vm.set('camerasEnabled', 1);
vm.set('username', '');
vm.set('password', '');
vm.set('vendorGuid', '');
vm.set('modelGuid', '');
vm.set('subscriber', '');
vm.set('event', '');
vm.set('partition', '');
vm.set('instructions', '');
}
But each time I use the set method, it fires the change event of its field, which then is captured back by the controller and do other interactions with the page that are not wanted in this case. So I need to suppress this event from being triggered temporarily. How can I accomplish this?

Answer 1

If you were setting values on the fields directly (i.e. not via a viewmodel), perhaps you could use setRawValue. But if you need to keep doing it the way you quoted, then here is a solution:
In order to prevent a field from firing the change event, its private suspendCheckChange property needs to be greater than 0. Therefore you could implement a method to walk through your fields and increase the property before doing your reset, and then, once reset is done, get the property value back where it was. Example:
suspendChange: function(suspend) {
var fields = Ext.ComponentQuery.query('field', this.getView()),
i = 0;
for (; i < fields.length; i++) {
if (suspend) {
fields[i].suspendCheckChange++:
} else {
fields[i].suspendCheckChange--;
}
}
},
clearFields: function() {
this.suspendChange(true);
// do reset stuff
this.suspendChange(false);
}