ExtJS提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由Ext.EventManager对象管理,与浏览器W3C标准事件对象Event相对应,Ext封装了一个Ext.EventObject事件对象。支持事件处理的类(或接口)为Ext.util.Observable,凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能。
首先我们来看标准html中的事件处理,看下面的html代码:
<script>
function fn(){
alert('onclick event');
}
</script>
<input id="btnAlert" type="button" onclick="fn();" value="alert"/>
点击这个按钮则会触发onclick 事件,并执行onclick 事件处理函数中指定的代码,这里直接执行函数fn 中的代码,也即弹出一个简单的信息提示框。再简单修改一下上面的代码,内容如下:
<script>
function fn(){
alert('onclick event');
}
window.onload=function(){
document.getElementById("btnAlert").onclick=fn;
}
</script>
<input id="btnAlert" type="button" value="alert"/>
上面的代码在文档加载的时候,就直接对btnAlert 的onclick 赋值,非常清晰的指明了按钮btnAlert 的onclick 事件响应函数为fn,注意这里fn 后面不能使用括号“()”。
ExtJS 中组件的事件处理跟上面相似,看下面的代码:
<script>
function fn(){
alert('onclick event');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",fn);
});
</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",fn);
Ext.get("btnAlert").on("click",fn);
});
addLinster 方法的另外一个简写形式是on,由于调用了两次addListener 方法,因此当点击按钮的时候会弹出两次信息。
ExtJS 还支持事件延迟处理或事件处理缓存等功能,比如下面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",fn,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 中的基本事件处理及使用方法,就可以在你的应用中随心所欲的进行事件相关处理操作了。
分享到:
相关推荐
实验六 事件处理,触摸屏幕显示触摸时间
主要对Java中的常用组件和事件处理进行介绍。里面并配有相应的例子。
C#处理事件的过程,笔者简单的归为六个过程
有的练习要补充的代码也写了,下载后自己看看,以后大家多传一些
基础化工行业事件快评:国六标准落地在即,相关处理设备及化工材料受益.pdf
一、事件基础 1.事件函数 obj.on-事件名=fn 定义事件的时候,事件函数不会自动执行,当事件触发的...将事件添加到父元素上,当事件发生时,父元素会找到对应触发事件的子元素去处理,后期添加的子元素,依然有这个事件
Esper-Java的复杂事件处理,流SQL和事件系列分析Esper是用于复杂事件处理(CEP),流SQL和事件序列分析的组件,可作为Java用于Esper,对于.NET作为NEsper。 Esper的主页和文档位于 Esper和NEsper是根据GNU通用公共...
实验一 编写简单程序 1.实验目的 通过编写有输入和输出的简单程序, 为用户提供与计算机交换信息的渠道. 实验二 函数 1.实验目的 ...实验六 多态性 一、实验目的 通过抽象类, 实现对继承来的方法的替换.
jQuery使用手册之 事件处理
java2 实用教程(第三版) 实验指导 上机实践6 组件及时间处理(1) 算术测试 信号灯 布局与日历
1.编写程序,使单选按钮可以使用isSelected()方法判断是否被选中,用getText()方法获得按钮的文本,JRadioButton对象也可以产生ItemEvent事件,该事件的处理方法与JCheckBox的处理方法相同。 2、编写程序,使...
信息系统应急处理预案 文档版本:V1.0 发布日期: *******公司 目录 第一章 总 则 3 第二章 组织机构和工作职责 5 第三章 预防与预警机制 5 第四章 应急响应程序 6 第五章 后期处置 10 第六章 应急保障 10 第七章 ...
为了迅速、有效地处理作业人员在施工过程中所遭遇的公众闹事事件,尽可能的为施工作业人员提供救援和帮助,保障施工作业人员的生命安全和健康,维护正常施工秩序。 实现“五个工程”(质量精品、科技创新、资源节约...
知识图谱是一种结构化的知识表达形式,它以图形的方式组织和存储了大量实体(如人、地点、事件等)及其相互关系。在知识图谱中,实体作为节点,实体之间的各种语义关联则通过边进行连接,形成了一个庞大的数据网络。...
前面说到,微信小程序框架是逻辑层与UI层分析的设计方式,这种设计方式需要解决两个问题 UI层响应逻辑层逻辑和数据的变化 UI层将用户的操作反馈到逻辑层 ...当事件发生时,框架会调用事件处理函数(如果有
分类器处理两类分类问题,其中一类代表降水事件,另一类代表非降水事件。 引入模糊性的概念来表示在两类之间的天气情况(如毛毛雨,间断性或阴天)更可能发生的情况。 根据上海宝山气象站发布的观测数据,进行了六...
C#实验 事件、继承和多态,实验指导书,外加实验源代码。模拟连锁反应事件,管理学生信息。
事件识别是基于事件的自然语言处理系统中最基本和最关键的任务。基于规则和浅层神经网络的现有事件识别方法具有一定的局限性。例如,使用基于规则的方法提取特征是困难的;基于浅层神经网络的方法过快地收敛到局部...
(3)及时组织有关部门和专业技术人员对校园网上出现的突发事件进行处理并根据情况的严重程度上报有关部门。 (4)与教育局装备站保持热线联系,协助装备站对教育网络信息网络安全突发事件应急预案全文共5页,当前为第2...
c#自定义事件分为六步,声明关于事件的委托,声明事件,编写引发事件的函数,事件处理,这里我们就来具体的介绍一下。 C#自定义事件的具体实现步骤如下: 1、声明一个delegate: (用于事件的类型的定义) 如: 代码如下...