Ext.Button点击事件的三种写法及比较

ExtJs的写法太灵活了，现在收集了关于Button点击事件的三种写法。今天做一个记录，以后备查。
首先创建一个JS文件写入以下代码：
1.点击默认为handler
Ext.onReady(function(){

new Ext.Button({
text:"确定",
//将BUTTON画在BODY中
renderTo:Ext.getBody(),
//BUTTON的宽度
minWidth:100,
id:"mybutton"
//点击事件
handler:function(){
Ext.MessageBox.show({
title: '提示' ,
msg: '你点击了我！' ,
buttons: Ext.MessageBox.OK ,
fn: function(){} ,
icon: Ext.MessageBox.INFO
});
}
});
});

2.添加监听方法，监听click事件。注意listeners不要少s
Ext.onReady(function(){

new Ext.Button({
text:"确定"
//将BUTTON画在BODY中
renderTo:Ext.getBody(),
//BUTTON的宽度
minWidth:100,
id:"mybutton",
//点击事件
listeners:{
"click":function(){
Ext.MessageBox.show({
title: '提示' ,
msg: '你点击了我！' ,
buttons: Ext.MessageBox.OK ,
fn: function(){} ,
icon: Ext.MessageBox.INFO
});
}
}
});
});

3.如果自己开发了多个组件，需要交互，可能要将事件写在外面达到松耦合的目的。
JS中的代码如下：
Ext.onReady(function(){

new Ext.Button({
text:"确定"
//将BUTTON画在BODY中
renderTo:Ext.getBody(),
//BUTTON的宽度
minWidth:100,
id:"mybutton"
});
});

网页代码中如下：
<script type="text/javascript">

Ext.onReady(function(){
//获得组件
var btn = Ext.getCmp("mybutton");
//绑定点击事件
btn.on("click" , function(){
Ext.MessageBox.show({
title: '提示' ,
msg: '你点击了我！' ,
buttons: Ext.MessageBox.OK ,
fn: function(){} ,
icon: Ext.MessageBox.INFO
});
});
});

</script>

handler与listener的区别

Handler

handler与Action相关联，一个Action可以有多个Component引用；

Action是一个可被共享的对象，有五个主要的属性：text, handler, iconCls, disabled, hidden

component的构建方式比较有意思：

new Ext.Button(action)

是Button接收一个Action对象作为构造参数吗？但是查看Button的API却没有发现action属性。反而Button的构造参数是一个(Object config)，也就是说，只是一个配置对象（包含各种属性），而Action的五个属性正好Button也都有，所以，可以接收一个Action来进行构造。

其他属性不考虑，看handler，Button中的handler配置项文档说明，这个handler是与click Event关联的。也就是说，click是Button这个Component的首要Event（参考Action中handler的文档），这就是Handler的运行方式：被某个组件的首要Event所触发。

Listener

上面说了handler是对首要Event的响应函数，而关于Event, Observable才是根源。

Ext.util.Observable是一切可进行事件监测之对象的父类（或者接口）。Observable只有一个配置项，那就是listeners，而一个listener是一个事件名 + 处理函数的组合，如：

"click" : function(){...}, "mouseOver" : function(){....}

Observable还提供了很多相关的处理事件的方法，比如添加事件，触发事件，移除监听器等等。

由上分析可以总结一下：

1、handler是一个特殊的listener；

2、handler是一个函数，而listener是<event , 函数>对；

3、handler与Action相关，用来让多个组件共享一个Action。而listener与Event相关，可以对Event进行方便的管理；

但是handler与普通的event + listener组合还是有一些不同，一个例子就是，如果用

Ext.util.Observable.capture(button, function(name){ if (name=="click") return false})

来事先捕获click事件，并阻止click时，如果Button的click是通过handler来响应的，则capture的return false函数无效，而如果button是定义了包含click事件的listener，则上面的capture生效。

http://blog.csdn.net/weihua1984/archive/2010/06/21/5684342.aspx

http://blog.csdn.net/smilingleo/archive/2009/01/08/3733177.aspx