首页 > 代码库 > ExtJS入门之事件(fireEvent)

ExtJS入门之事件(fireEvent)

事件是指一个特定的动作,这个动作可以针对HTML元素的,如keydown,keyup,mouseover, mouseout等,也可以是对于其它自定义的动作,如对Ajax异步请求的响应等。在ExtJS中,该如何处理呢?

1. 处理HTML元素的标准事件

HTML元素的标准事件是指mouseover、mousedown、click、blur、focus、change等能够直接对HTML元素发生的事件。在ExtJS中,这些事件的处理可以用如下的代码:

  • 注册一个事件处理函数使用: Ext.get(‘myElement‘).on(‘click‘, myHandler, myScope) myElement是要注册的元素的ID,click是事件的名称(注意,和HTML元素中的声明on

    XXX不同,这里不需要on),myHandler 是处理函数的函数名称,myScope是一个可选的参数,指定处理函数绑定的对象,也就是处理函数的作用域,如果不提供这个参数,则是默认的 window。

  • 撤销一个事件处理函数: Ext.get(‘myElement‘).un(‘click‘, myHandler, myScope) 参数的意义同上。

ExtJS会根据不同的浏览器进行相应的处理,根本不需要理会用户用的是什么浏览器。根据事件的不同,传给处理函数的参数也会不同,这个只能参考ExtJS的文档了,必要时还得参考源代码。

2. 处理自定义事件

在ExtJS中使用自定义事件,需要从Ext.util.Observable继承,示例代码如下:

Employee = function(name){
   this.name = name;
   this.addEvents({
      "fired" : true,
      "quit" : true
   });
}
Ext.extend(Employee, Ext.util.Observable, { ... });

在这段代码中,定义了一个Employee类,定义了fired和quit两个事件。如何触发这两个事件呢,基类Ext.util.Observable提供了触发自定义事件的方法fireEvent(eventName, arg1, arg2, ... argn), eventName是要触发的时间的名称(不区分大小写),后面的参数arg1,arg2等是要传给事件处理函数的参数。用上面的Employee类做示例,触发quit事件:

this.fireEvent(‘quit‘, this);

这行代码将触发quit事件,并将Empolyee类的实例传给quit事件的处理函数,quit事件的订阅可以采用如下代码:

function myHandler1(empolyee){ ... }
function myHandler2(empolyee){ ... }

var emp = new Empolyee(‘tom‘);
emp.on(‘quit‘, myHandler1);
emp.on(‘quit‘, myHandler2);

在上面的代码中,为quit事件注册了两个处理函数(myHandler1与myHandler),当quit事件被激发时,将会依次调用myHandler1和myHandler2两个函数。

值得注意的是,不管是HTML元素的标准事件还是自定义事件,如果为某个时间注册了多个处理函数,如前面的例子,如果myHandler1返回false 的话,则会取消在myHandler1之后注册的处理函数的执行,即该事件被取消,从而停止继续执行该事件的处理函数,而这个返回值false会作为事件 激发的结果,返回给empolyee,即:

var result = this.fireEvent(‘quit‘, this);
if (result === false) {
   alert(‘event canceled‘); //这里表示事件被某个处理函数取消
}
else {
   alert(‘event complete‘); // 这里表示事件执行完毕
}

通过Ext的自定义事件的机制,可以实现一对多的观察者模式,也可以实现一对一的绑定模式,这一点,在ExtJS的开发中是很重要的。

参考官方相关实现类:

/**
 * @class Ext.calendar.form.EventWindow
 * @extends Ext.Window
 * <p>A custom window containing a basic edit form used for quick editing of events.</p>
 * <p>This window also provides custom events specific to the calendar so that other calendar components can be easily
 * notified when an event has been edited via this component.</p>
 * @constructor
 * @param {Object} config The config object
 */
Ext.define(‘Ext.calendar.form.EventWindow‘, {
    extend: ‘Ext.window.Window‘,
    alias: ‘widget.eventeditwindow‘,
    
    requires: [
        ‘Ext.form.Panel‘,
        ‘Ext.calendar.util.Date‘,
        ‘Ext.calendar.data.EventModel‘,
        ‘Ext.calendar.data.EventMappings‘
    ],
    constructor: function(config) {
        var formPanelCfg = {
            xtype: ‘form‘,
            fieldDefaults: {
                msgTarget: ‘side‘,
                labelWidth: 65
            },
            frame: false,
            bodyStyle: ‘background:transparent;padding:5px 10px 10px;‘,
            bodyBorder: false,
            border: false,
            items: [{
                itemId: ‘title‘,
                name: Ext.calendar.data.EventMappings.Title.name,
                fieldLabel: ‘Title‘,
                xtype: ‘textfield‘,
                allowBlank: false,
                emptyText: ‘Event Title‘,
                anchor: ‘100%‘
            },
            {
                xtype: ‘daterangefield‘,
                itemId: ‘date-range‘,
                name: ‘dates‘,
                anchor: ‘100%‘,
                fieldLabel: ‘When‘
            }]
        };
    
        if (config.calendarStore) {
            this.calendarStore = config.calendarStore;
            delete config.calendarStore;
    
            formPanelCfg.items.push({
                xtype: ‘calendarpicker‘,
                itemId: ‘calendar‘,
                name: Ext.calendar.data.EventMappings.CalendarId.name,
                anchor: ‘100%‘,
                store: this.calendarStore
            });
        }
    
        this.callParent([Ext.apply({
            titleTextAdd: ‘Add Event‘,
            titleTextEdit: ‘Edit Event‘,
            width: 600,
            autocreate: true,
            border: true,
            closeAction: ‘hide‘,
            modal: false,
            resizable: false,
            buttonAlign: ‘left‘,
            savingMessage: ‘Saving changes...‘,
            deletingMessage: ‘Deleting event...‘,
            layout: ‘fit‘,
    
            defaultFocus: ‘title‘,
            onEsc: function(key, event) {
                        event.target.blur(); // Remove the focus to avoid doing the validity checks when the window is shown again.
                        this.onCancel();
                    },
            fbar: [{
                xtype: ‘tbtext‘,
                text: ‘<a href=http://www.mamicode.com/"#" id="tblink">Edit Details...‘> 


ExtJS入门之事件(fireEvent)