ExtJS在事件驱动编程这一块做的是比较好的,下面通过一个简单的例子演示Ext中对事件的处理操作。
在事件驱动编程中,使用ExtJS可以很方便的处理组件的各种事件。为一个组件添加事件的方式是:组件.on(event,fn);
如:为按钮添加一个单击事件就可以这样写,
// 创建一个按钮,这里组件的创建就像是Java中一样的,使用面向对象的方法来创建组件,因此ExtJs是Javascript语言面向对象的一个体现
var btn = new Ext.Button({text:"按钮一"});
btn.on("click",function(){执行函数的内容});
下面是事件编程的一个示例:单用户单击按钮的时候弹出一个对话框,同时间按钮的文本值在弹出来的窗口标题上显示。
event.html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext事件驱动编程示例</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="event.js"></script>
</head>
<body>
<a id="link1">连接一</a>
<div id="btn"></div>
</body>
</html>
event.js代码如下:
Ext.onReady(function() {
// 创建第一个按钮
var btn1 = new Ext.Button({
text : "Button1",
renderTo : Ext.get("btn")
});
// 创建第二个按钮
var btn2 = new Ext.Button({
text : "Button2",
renderTo : Ext.get("btn")
});
// 当按钮被单击的时候执行的函数
function btnClick(btn, e) {
new Ext.Window({
title:btn.text,
width:200,
height:200
}).show();
};
btn1.on("click", btnClick);
btn2.on("click", btnClick);
});
总结:
button组件中click事件的API如下:
click( Button this, EventObject e )
单击触发事件。Fires when this button is cl...
单击触发事件。Fires when this button is clicked
监听器会传入以下的参数:
this Button
e EventObject
单击的事件对象。The click event
在上面的例子中,对按钮的单击事件做了一个监听-->btn1.on("click", btnClick); 所以当用户在对按钮进行单击操作的时候就会去执行回调函数btnClick中的内容,这个回调函数可以传入两个参数,当然可以根据你的需要以传入不同的参数列表。在这两个参数中,参数一是按钮本身这个对象,参数二是单击的事件对象,这时我们得到了按钮本身这个对象,因此就可以操作按钮中的属性了。
写在最后:在ExtJS中使用事件驱动编程处理各种事件时,可以参阅官方提供的api,它是我们很好的一个学习资料!