使用自定义事件分四步：
1 先定义一个类，为这个类增加事件，
2将这个类继承为Ext.util.Observable的子类，也就是扩展Ext.extend('','')
3为这个类的实例中的这个事件绑定处理函数
4 用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元素中的声明onXXX不同，这里不需要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的开发中是很重要的。
参考代码：
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2. "http://www.w3.org/TR/html4/loose.dtd">
3. <html>
4. <head>
5. <script type="text/javascript" src="ext-base.js"></script>
6. <script type="text/javascript" src="ext-all.js"></script>
7. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
8. <title>http://www.webkaifa.com</title>
9. </head>
10. <body>
11. </body>
12. </html>
13. <script>
14. Employee = function(name){
15. this.name = name;
16. this.addEvents({
17. "fired" : true,
18. "quit" : true
19. });
20. }
21. Ext.extend(Employee, Ext.util.Observable,{});
22. function myHandler1(empolyee){ alert("handler1"); }
23. function myHandler2(empolyee){ alert("handler2"); }
24. var emp = new Employee('tom');
25. emp.on('quit', myHandler1);
26. emp.on('quit', myHandler2);
27. emp.fireEvent('quit', this);
28. </script>
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
