Extjs 组件的事件处理

ExtJS 提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监
控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由
Ext.EventManager 对象管理,与浏览器W3C 标准事件对象Event 相对应,Ext 封装了一个
Ext.EventObject 事件对象。支持事件处理的类(或接口)为Ext.util.Observable,凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能。
首先我们来看标准html 中的事件处理,看下面的html 代码:


点击这个按钮则会触发onclick 事件,并执行onclick 事件处理函数中指定的代码,这里
直接执行函数a 中的代码,也即弹出一个简单的信息提示框。再简单修改一下上面的代码,
内容如下:


上面的代码在文档加载的时候,就直接对btnAlert 的onclick 赋值,非常清晰的指明了
按钮btnAlert 的onclick 事件响应函数为a,注意这里a 后面不能使用括号“()”。
ExtJS 中组件的事件处理跟上面相似,看下面的代码:


Ext.get("btnAlert")得到一个与页面中按钮btnAlert 关联的Ext.Element 对象,可以直接调
用该对象上的addListener 方法来给对象添加事件,同样实现前面的效果。在调用addListener
方法的代码中,第一个参数表示事件名称,第二个参数表示事件处理器或整个响应函数。
ExtJS 支持事件队列,可以往对象的某一个事件中添加多个事件响应函数,看下面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});

addLinster 方法的另外一个简写形式是on,由于调用了两次addListener 方法,因此当点
击按钮的时候会弹出两次信息。
当然,ExtJS 还支持事件延迟处理或事件处理缓存等功能,比如下面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});

由于在调用addListener 的时候传递指定的delay 为2000,因此当用户点击按钮的时候,
不会马上执行事件响应函数,而是在2000 毫秒,也就是两秒后才会弹出提示信息框。

当然,在使用Ext 的事件时,我们一般是直接在控件上事件,每一个控件包含哪些事件,
在什么时候触发,触发时传递的参数等。

在ExtJS 项目的文档中都有较为详细的说明。比
如对于所有的组件Component,都包含一个beforedestroy 事件,该事件会在Ext 销毁这一个
组件时触发,如果事件响应函数返回false,则会取消组件的销毁操作。
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口", height:200, width:300
});
win.on("beforedestroy",function(obj){
alert("想关闭我,这是不可能的!");
obj.show();
return false;
});
win.show();});

由于在窗口对象的beforedestroy 事件响应函数返回值为false,因此执行这段程序,你
会发现这个窗口将无法关闭。组件的事件监听器可以直接在组件的配置属性中直接声明,如
下面的代码与前面实现的功能一样:
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口",
height:200, width:300,
listeners:{"beforedestroy":function(obj){
alert("想关闭我,这是不可能的!");
obj.show(); return false;
}}
});
win.show();});

了解了ExtJS 中的基本事件处理及使用方法,就可以在你的应用中随心所欲的进行事件
相关处理操作了。

你可能感兴趣的:(ext)