ExtJS框架的事件模型及其常用功能

ExtJS框架的事件模型及其常用功能2014-05-27 cnblogs Liam Wang前言

工作中用ExtJS有一段时间了，Ext丰富的UI组件大大的提高了开发B/S应用的效率。虽然近期工作中天天都用到ExtJS，但很少对ExtJS框架原理性的东西进行过深入学习，这两天花了些时间学习了下。我并不推荐大家去研究ExtJS框架的源码，虽然可以学习其中的思想和原理，但太浪费精力了，除非你要自己写框架。

对于ExtJS这种框架，非遇到“杂症”的时候我觉得也没必要去研究其源码和底层的原理，对其一些机制大致有个概念，懂得怎么用就行，这也是本篇博文的主要目的。
Ext自己的事件机制

Ext中的事件遵循树状模型，和事件相关的类主要有这么几个： Ext.util.Observable、Ext.lib.Event、Ext.EventManager和Ext.EventObject。

Ext使用 Ext.lib.Event、Ext.EventManager和Ext.EventObject对原生浏览器事件进行了封装，最后给我们用的是一套统一的跨浏览器的通用事件接口。HTML元素本身已经支持事件，为什么基本上所有的主流JS框架都要实现自己的事件机制呢？一个最主要的原因是HTML元素对事件的处理是通过简单的单一绑定实现的，如果不进行封装，事件只能绑定到一个事件处理句柄。如下面代码所示：

var e = document.getElementById（"test"）;e.onclick = function（） { alert（"handler1"） };e.onclick = function（） { alert（"handler2"） };

单击test按钮后会发现只会弹出一个显示 "handler2"的提示框，因为第一个被覆盖。而使用像Ext、jQuery这样的框架就不用担心这个问题，同一个事件可以依次绑定多个事件处理句柄，如下代码所示：

Ext.onReady（function （） {var test = Ext.get（"test"）;test.on（"click", function （） {alert（"handler1"）;}）;test.on（"click", function （） {alert（"handler2"）;}）;}）;

Ext实现自己的事件机制，原因很多，比如为了兼容不同浏览器之间的差异等。Ext对原生浏览器事件的封装都在上面所说的几个类中，如果在项目中要熟练应用Ext，是非常有必要了解一下和事件相关的类和常用函数的。下面开始介绍这些类和它们的功能。
Ext.util.Observable
Ext.util.Observable在Ext事件模型中有着举足轻重的地位，位于Ext组件的顶端，为Ext组件提供处理事件的最基本的功能。所有继承自Ext.util.Observable类的控件都可以支持事件。可以为这些继承了 Ext.util.Observable的对象定义一些事件，然后为这此事件配置监听器。当某个事件触发时，Ext会自动调用对应的监听器，这些就是Ext的事件模型。
下面通过继承Ext.util.Observable来实现一个支持事件的对象：

Ext.onReady（function （） {//定义一个Person类。function Person（name） {this.name = name;this.addEvents（"walk", "eat"）;this.superclass.constructor.call（this）;}//1、让Person继承Ext.util.Observable的所有属性，// 这样Person类构造器中的addEvents和Person.superclass.constructor.call（）在实例创建时才会起作用。// Person的实例就可以应用Ext的事件相关的on、un等方法和在Person类构造器中的addEvents和Person.superclass.constructor.call（）了。//2、添加一个info（）函数，让它返回Person信息。Ext.extend（Person, Ext.util.Observable, {info: function （event） {return this.name + " is " + （event ？ "ing" : "doing nothing"） + ".";}}）;//1、创建一个Person实例，然后为它的事件配置好监听器。//2、on是addListener的简写，un是removeListener简写var person = new Person（"Liam"）;person.on（"walk", function （） {this.state = "walk";Ext.Msg.alert（"event", this.name + " is walking."）;}）;person.on（"eat", function （meal） {this.state = "eat";Ext.Msg.alert（"event", this.name + " is eating " + meal + "."）;}）;//测试效果Ext.get（"btnWalk"）.on（"click", function （） {person.fireEvent（"walk"）;}）;Ext.get（"btnEat"）.on（"click", function （） {person.fireEvent（"eat", "breakfast"）;}）;Ext.get（"btnInfo"）.on（"click", function （） {Ext.Msg.alert（"info", person.info（person.state））;}）;}）;

以上代码展示了在Ext中如何通过继承Ext.util.Observable给一个类自定义事件，到这，我们大概也了解了addListener/on、addEvents和fireEvent这些函数的基本用法，removeListener/un函数相关内容还会在本文后面介绍。如果要了解Ext.util.Observable的其他细节，可看看Ext官方API文档的介绍。
Ext.lib.Event