EXT 按钮事件
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在EXT中，当我们要为按钮点击添加处理function的时候，可以看到一般人的实现分成2类：
1.使用onClick: function xx()
2.使用handler: function xx()
完成后，我们会发现，无论用哪一种实现，再点击按钮时都能触发xx这个function. 那么有人就会考虑，为什么EXT提供了2个功能一样的东西，或者说这2种方式有哪些细微的不同？
首先有一点需要明确，在Button中，onClick是一个方法，而handler是一个配置项。
接着，为了明确这2种方式本质上的区别，我们查看Button的源码：
// private
onClick : function(e){
......一系列其他无关的代码
if(this.handler){
//this.el.removeClass('x-btn-over');
this.handler.call(this.scope || this, this, e);
}
}
},
源码中可以看到，handler在onClick的实现中被调用。
进一步分析，我们点击按钮的时候，又是如何会调用onClick的？看下面一段源码：
[js]view plaincopy
1.// private
2. initButtonEl : function(btn, btnEl){
3. ......一系列无关的代码
4.if(this.repeat){
5. ......一系列无关的代码
6.this.mon(repeater, 'click', this.onRepeatClick, this);
7. }else{
8.this.mon(btn, this.clickEvent, this.onClick, this);
9. }
10. },
在初始化button的el的时候，Ext通过this.mon将 'click'事件和onClick绑定在了一起。
（注：这里mon方法是Ext3.x中对on方法的升级版，为了防止内存泄漏之类的）。
综上，整个流程便是：Button实例化——> 'click'事件
——>this.onClick——>this.handler
因此，我们配置了handler，在按钮点击的时候，自然会被触发。
然而另一种方式写了onClick 之后哦，this.handler会失效。
onClick的方式是对EXT源码的重写和覆盖，而不是调用，会破坏EXT按钮中原有的逻辑。
同时可以注意到，onClick在源码中是被标注为//private的，API中也查不到这个方法。
所以在实现按钮的点击事件的时候，我们应该使用handler这个配置项，而不是重写onClick 方法。
handler与listener的区别
ExtJS里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生效。
按钮事件
[html]view plaincopy
1.<html>
2.<head><title>演示</title>
3.<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
4.<link rel="stylesheet"type="text/css"media="all"href="extjs/resources/css
/ext-all.css"/>
5.<script type="text/javascript"src="extjs/adapter/ext/ext-base.js"></script>
6.<script type="text/javascript"src="extjs/ext-all.js"></script>
7.<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
8.
9.<script type="text/javascript">
10.Ext.onReady(function(){
11. var buttonName = new Ext.Button({
12. id:"buttonName",
13. text:"这是一个按钮",
14. //tooltip:"提示信息：Button组件基本用法",
15. //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();
16.
17. //tooltipType:"title", //定义显示提示信息的类型，有qtip和title两
种方式，默认是qtip
18.
19. type:"button", //按钮类型：可以是submit, reset or button 默认
是 button
20.
21. //autoShow:true, //默认false,自动显示
22.
23. // hidden:false, //默认false，是否隐藏
24.
25. //hideMode:"offsets", //隐藏方式，默认display,可以取值：display，
offsets，visibility
26.
27. //cls:"cssButton", //样式定义,默认""
28.
29. //disabled:false, //是否可用，默认false
30.
31. // disabledClass:"", //默认x-item-disabled
32.
33. //enableToggle:true, //默认false
34.
35. //pressed:false, //设置按钮是否已经被按下，默认是false
36.
37. //html:"Ext",//默认""
38.
39. // handleMouseEvents:true, //默认true,如果为false,那么mouseout
mouseover就不能被触发
40.
41. //x:number,y:number,在容器中的x,y坐标
42.
43. handler:function(){Ext.Msg.alert('提示消息框','测试Button组件：
handler事件！');},//添加事件
44.
45. listeners:{//添加监听事件可以结合handler测试这两个事件哪个最先执
行
46. "click":function(){
47. Ext.Msg.alert('提示消息框','测试Button组件：listeners事
件！');
48. //Ext.getCmp("buttonName").hide();//隐藏按钮
49. }
50. },
51.
52. //cls:"x-btn-text-icon",//添加图标前需要设置该属性
53.
54. //icon:"house.gif", //图标的地址
55.
56. //plugins : Object/Array扩展插件时使用
57.
58. // repeat:false, //默认false ,如果为true,需要设置mouseover事
件
59.
60. renderTo:Ext.getDom("hello") //将组件的显示效果渲染到某个节点的
ID
61.
62. });
63.
64.});
65.
66.</script>
67.</head>
68.
69.</head>
70.<body>
71.<div id="hello"></div>
72.
73.</body>
74.</html>
注意：handler注释才会listeners，不然只会handler。