ExtJS入门之二 事件
来源:互联网 发布:汇顶算法笔试题 编辑:程序博客网 时间:2024/06/06 07:23
原文:http://www.cnblogs.com/beginor/archive/2008/03/07/1095887.html
事件是指一个特定的动作,这个动作可以针对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的开发中是很重要的。
- ExtJS入门之二 事件
- ExtJS入门之二 事件
- ExtJS入门之二 事件
- extjs 事件入门二
- ExtJS入门之 事件
- ExtJS入门之事件(fireEvent)
- ExtJS入门之事件(fireEvent)
- ExtJS学习笔记之二-------ExtJS入门介绍
- ExtJS学习二:事件
- extjs入门(二)
- ExtJS梦想之旅(二)--Ext事件驱动编程
- extjs入门之helloword
- EXTJS之GRID 二
- ExtJs组件之事件处理
- ExtJS初级教程之ExtJS Tree(二)
- ExtJS初级教程之ExtJS Grid(二)
- Extjs系列之二 - Extjs继承系统
- ExtJS入门之三 查询
- 基于Spring可扩展Schema提供自定义配置支持
- 技术人员职业生涯的红色警报
- 2小时一个空指针BUG带来的思考
- 梁彪:西方多值逻辑发展的四个阶段
- 开学了
- ExtJS入门之二 事件
- 标准C++类std::string的内存共享和Copy-On-Write技术(转)
- 国产手机体验qq全部功能
- 2007年多值逻辑与认知学术研讨会
- 好消息:CommonPhotoStar已经有中文的帮助文件了
- 检测系统中的空密码帐号
- com本质论 问题 BASE_OFFSET 宏
- 关于VSS和Visual Studio代码上传出现空行问题的解决
- 《语言、逻辑与认知》简介