冷雨在线
EasyJWEB,JavaScript,Spring,JPA,MySql
半路出家,现在混JAVA.
我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>《ExtJS2.0实用简明教程》之事件处理
《ExtJS2.0实用简明教程》之事件处理
    作者:小雨 来源: 发表时间:2008-02-17

 
 

《ExtJS实用开发指南》印刷版3月10号推出,赶快去看看吧。 

 

 

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

<script>
function a()
{
alert('some thing');
}
</script>
<input id="btnAlert" type="button" onclick="a();" value="alert框" />

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

<script>
function a()
{
alert('some thing');
}
window.onload=function()
{
document.getElementById("btnAlert").onclick=a;
}
</script>
<input id="btnAlert" type="button" value="alert框" />

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

<script>
function a()
{
alert('some thing');
}

Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />

  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中的基本事件处理及使用方法,就可以在你的应用中随心所欲的进行事件相关处理操作了。
关于ExtJS中事件处理中作用域、事件处理原理、给自定义的组件添加事件、处理相关的Ext.util.Observable及Ext.EventManager类详细介绍,请参考wlr.easyjf.com中的VIP文档《ExtJS中的事件处理详解》。 

(版权声明:本人Blog上的所有文章版本均归EasyJF开源的冷雨所有,受法律保护,可以在互联网上进行转载,转载必须保留作者版权声明及链接;未经本人书面许可,不得把本人Blog上的文章用于出版、发行或其它商业用途。)

 

上一篇:组件的配置属性    下一篇:Panel 

 
 
 

(阅读 )   评论数(:8)
评论】 【收藏】
评论:共8条
Me dull. You smart. That's just what I neeedd.
评论人: tGQvzyjdbAY     评论时间: 2012-01-03 20:56:15
GJDAKV , [url=http://zuznafdunjuq.com/]zuznafdunjuq[/url], [link=http://shfbwagtbhjj.com/]shfbwagtbhjj[/link], http://thutybadcfsu.com/
评论人: hBvOEouD     评论时间: 2012-01-04 21:32:27
lCN92A  <a href="http://omniokawvajf.com/">omniokawvajf</a>
评论人: ATJKHVCYxvCaJeRpbMn     评论时间: 2012-01-06 19:56:54
vo8yf7 , [url=http://iqlkviahqjcb.com/]iqlkviahqjcb[/url], [link=http://lqnxoabwnnfw.com/]lqnxoabwnnfw[/link], http://dphbrgynpttu.com/
评论人: SalaPPbQaaBd     评论时间: 2012-01-07 01:10:32
That's a cunning answer to a challegning question
评论人: bqxRXWUNZwsvqBdf     评论时间: 2012-08-09 15:46:42
Xdjcmg  <a href="http://khqcdvdyurew.com/">khqcdvdyurew</a>
评论人: rGxmHwBN     评论时间: 2012-08-10 13:11:51
VqO9QD , [url=http://ejjdphrldfsp.com/]ejjdphrldfsp[/url], [link=http://gloswglnasza.com/]gloswglnasza[/link], http://ollxofeyaqnk.com/
评论人: CMGOUUAAGZ     评论时间: 2012-08-10 17:38:05
SYCYg1  <a href="http://snlodlrlnend.com/">snlodlrlnend</a>
评论人: TgpCBYoSmwxNCPwinq     评论时间: 2012-08-11 00:57:11

发表评论:
发表人:
评论: 
验证码:
请输入前面图中的四位验证码,字母不区分大小写
  
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率