Ext.js-自定义事件和侦听器

在Web开发中，我们常常需要处理事件，例如当用户单击按钮或是输入完成时，需要执行相应的操作。在Ext.js中，我们不仅可以使用浏览器提供的事件，还可以自定义事件，并为这些事件添加侦听器。

自定义事件

下面是一个自定义事件的例子：

Ext.define('MyComponent', {
    extend: 'Ext.Component',
    alias: 'widget.mycomponent',
    
    config: {
        name: ''
    },
    
    // 自定义事件
    // 事件名称为beforeSayHello
    beforeSayHello: function() {
        // 触发事件时会执行这段代码
        console.log('beforeSayHello');
    },
    
    // 响应点击事件触发sayHello事件
    onClick: function() {
        this.fireEvent('beforeSayHello');
        this.fireEvent('sayHello');
    }
});

var myComponent = Ext.create('MyComponent', {
    renderTo: Ext.getBody(),
    name: 'World',
    
    // 响应sayHello事件
    listeners: {
        sayHello: function() {
            var name = this.getName();
            console.log('Hello, ' + name + '!');
        }
    }
});

这个例子中，我们定义了一个MyComponent组件，它包含一个自定义事件beforeSayHello和一个浏览器提供的事件onClick。当用户单击这个组件时，onClick事件将触发beforeSayHello和sayHello事件。sayHello事件的侦听器会将组件中的name属性和一段字符串组合起来输出。我们通过fireEvent函数来触发自定义事件和浏览器提供的事件。

为事件添加侦听器

我们可以使用addListener函数或者on函数为事件添加侦听器。例如：

myComponent.on('beforeSayHello', function() {
    console.log('This is a beforeSayHello listener.')
});

这里我们为beforeSayHello事件添加了一个侦听器，其作用是在事件被触发前输出一段字符串。

一个侦听器一般需要两个参数：事件名称和回调函数。在回调函数中，我们可以处理事件的逻辑。在侦听器中，this代表的是组件本身。

除了addListener和on函数之外，我们还可以使用mon函数和un函数来添加和移除侦听器。mon表示“monitor”，即“监视”，用于添加侦听器；un表示“unmonitor”，即“取消监视”，用于移除侦听器。这两个函数的用法和addListener/on类似，这里不再赘述。

小结

在Ext.js中，我们可以自定义事件，通过fireEvent函数触发事件，通过addListener/on/mon函数为事件添加侦听器。这种方式可以很好地组织代码、提高代码复用率和可维护性。在实际开发中，我们应该结合业务逻辑和需求场景来使用自定义事件和侦听器。