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）注册到实例上。