事件模型在Ext中占有重要作用，Ext事件分为两种：自定义事件和浏览器事件。

一、自定义事件
 Ext的自定义事件由Ext.util.Observable类提供支持，所属继承自该类的类都支持自定义事件。自定义事件由三个步骤完成：类型定义并继承自Ext.util.Observable，并声明事件；配置监听听器；事件触发。下面提供事例说明：
 代码清单: Person类
 

＜script language="javascript" type="text/javascript"＞
    Person = function(name) {
        this.name = name;
        this.addEvents("walk", "eat", "sleep");//自定义事件
    }
    Ext.extend(Person, Ext.util.Observable, {
        info: function(event) {
            return this.name + " is " + event + " ing.";
        }
    });
＜/script＞

 在这里，声明了一个Person类，它继承自Ext.util.Observable，并声明了三个自定义事件:walk,eat和sleep。这里完成了三步走的第一步，接下来配置监听听器：

＜script language="javascript" type="text/javascript"＞
    var person = new Person("Lingo");
    person.on("walk", function() {
        Ext.Msg.alert("event", person.name + "在走啊在走啊。");
    });

    person.on("eat", function(breakfast, lunch, supper) {
        Ext.Msg.alert("event", person.name + "要吃"+ breakfast +"," + lunch + "和" + supper + "。" );
    });

    person.on("sleep", function(time) {
        Ext.Msg.alert("event", person.name + "从" + time.format("H") + "点开始睡觉啦。");
    });
＜/script＞

 
注：Ext事件注册由addListener/on完成，on是addListener的简写形式，作用和参数完全一致。对应的注销事件监听听的方法是removeListener/un。

addListener/on方法说明：
原形：addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
参数：
eventName    监听听的事件，当是自定义事件是，为原事件名，浏览器事件时，不需要前导的on。如监听听浏览器的onclick事件时，只需要on(“click”, fun)即可。
handler       事件的触发代码
scope         可选的事件上下文对象，这个对象在事件调用中可用this引用。
options       可选的事件复杂参数，可配置事件的响应试和传递参数使用。

removeListener/un方法说明：
原形：removeListener( String eventName, Function handler, [Object scope] ) : void
参数：(参数同上)

在这里，完成了自定义的第二个步骤，为person对象注册了事件监听听。下面继续进行最后一个操作，触发对象的事件。

＜input id="walk" value="valk" type="button" /＞
＜input id="eat" value="eat" type="button" /＞
＜input id="sleep" value="sleep" type="button" /＞

＜script language="javascript" type="text/javascript"＞
    Ext.get("walk").on("click", function() {
        person.fireEvent("walk");
    });

    Ext.get("eat").on("click", function() {
        person.fireEvent("eat", "早餐", "中餐", "晚餐");
    });

    Ext.get("sleep").on("click", function() {
        person.fireEvent("sleep", new Date());
    });
＜/script＞

 在这份表单中，创建了三个Button，在其click事件中，触发自定义事件。测试发现，都可以成功触发person的自定义事件。可以看到，自定义事件是由自定自Ext.util.Observable的fireEvent完成的。

fireEvent说明
原形：fireEvent( String eventName, Object... args ) : Boolean
参数：eventName     事件名
      args           可变参数列表
返回值：如果事件链中有任意一个返回false，则会返回false，否则返回true

注：在原JavaScript所有函数调用中，参数是可变的，比如你可以向一个声明了三个形参数的方法传递任意个实际参数，这样都不会有问题，但是fireEvent的调用却不允许这样做，假若这样操作的话，不会出错，但也不会触发监听听的事件。这是个需要注意的地方。

二、浏览器事件

 浏览器事件是传统意义上的由浏览器触发的，像鼠标单击、移动等事件，它与页面紧密相关。Ext使用Ext.EventManager、Ext.EventObject和Ext.lib.Event对原生浏览器事件进行了封装，最后展现在我们面前的是一个统一的跨浏览器的通用的事件接口。对原生浏览器事件进行封装的主要原因是，原生浏览器事件只是通过简单的绑定，当重复绑定同一事件时，只会最后一个绑定函数才会起作用，如下面的事例：

 ＜input type="button" id="testEvent" value="原生事件" /＞
＜script language="javascript" type="text/javascript"＞
    var testEvent = document.getElementById("testEvent");
    testEvent.onclick = function() { alert("事件1"); }
    testEvent.onclick = function() { alert("事件2"); }
＜/script＞

 上面的例子只会弹出“事件2”的对话框，因为第一个事件绑定被第二个事件绑定覆盖了。如果使用Ext框架，则可避免这种情况，如下：

＜input type="button" id="testEvent2" value="Ext事件" /＞
＜script language="javascript" type="text/javascript"＞
    Ext.onReady(function() {
        Ext.get("testEvent2").on("click", function() {
            alert("事件1");
        });
        Ext.get("testEvent2").on("click", function() {
            alert("事件2");
        });
    });
＜/script＞

 在上面，为按钮注册了两个监听听器，点击后，会看到两个对话框。
 Ext对原生事件的扩展与浏览器事件可以同时使用，相互不受影响。