ExtJS梦想之旅（二）--Ext事件驱动编程

        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，它是我们很好的一个学习资料！