ExtJS2.0实用简明教程——事件处理

最新推荐文章于 2018-04-14 14:49:04 发布

转载最新推荐文章于 2018-04-14 14:49:04 发布 · 1.2k 阅读

文章标签：

#extjs #function #button #input #delay #文档

EXT2 专栏收录该内容

54 篇文章

订阅专栏

本文介绍了ExtJS中的事件处理机制，包括如何使用Ext.get获取元素并添加事件监听器，支持事件队列、事件延迟处理等功能。同时展示了如何阻止默认事件处理流程及在组件配置中直接声明事件监听器。

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

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

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

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

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

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

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

　　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中的事件处理详解》。