Ext JS 自定义事件

Ext JS 允许我们使用Ext.mixin.Observable关键词混入(Mixin)到类中来自定义事件。Ext.mixin.Observable为Ext JS 5 & 6提供了事件发布的公共接口。下面的这个例子展示了如何在student name更改时使用mixins发布事件。

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');

自定义事件的方法如下：

1. 在mixins配置中中定义了Ext.mixin.Observable；
2. 在构造函数中调用this.mixins.observable.constructor.call(this, config)来初始化第一步的配置；
3. 在updateName()方法中使用fireEvent()来触发自定义的事件studentNameChanged；
4. 在Student类实例化时，通过on()方法将事件句柄（studentNameChanged）注册到实例上。