Ext JS allows us to define custom events in class using Ext.mixin.Observable mixin. Ext.mixin.Observable provides common interface for publishing events in Ext JS 5 & 6.
The following example demonstrates how you can publish an event using mixins whenever student name changes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Ext.define('Student', { config : { name : '' }, mixins : { observable : 'Ext.util.Observable' }, constructor : function(config){ this.mixins.observable.constructor.call(this, config); }, updateName : function(newValue, oldValue){ this.fireEvent('studentNameChanged', newValue); } }); var newStudent = Ext.create('Student', { name: 'xyz' }); newStudent.on('studentNameChanged', function(name){ alert('student Name ' + name + 'has been Chaged.'); }); newStudent.setName('John'); |
In the above example, we have included Ext.mixin.Observable mixin using mixins config so that we can use it. In the constructor, we call this.mixins.observable.constructor.call(this, config) which initialiazes the config. In the updateName() method, we fire custom event studentNameChanged using fireEvent() method with new value. We handle this event on newStudent instance where we register the handler using on() method.
Try it on https://fiddle.sencha.com/#fiddle/3l5
Every component in Ext JS includes number of events which we can handle it in ViewController or in the component itself. Learn about component event in the component section.