EXT按钮事件
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的？看下面一段源碼：
?
// privateinitButtonEl : function(btn, btnEl){......一系列無關的代碼if(this.repeat){......一系列無關的代碼this.mon(repeater, 'click', this.onRepeatClick, this);}else{this.mon(btn, this.clickEvent, this.onClick, this);}},?在初始化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>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">
Ext.onReady(function(){var buttonName = new Ext.Button({id:"buttonName",text:"這是一個按鈕",//tooltip:"提示信息：Button組件基本用法",//提示信息,如果需要顯示提示信息，需要使用Ext.QuickTips.init();//tooltipType:"title", //定義顯示提示信息的類型，有qtip和title兩種方式，默認是qtiptype:"button", //按鈕類型：可以是submit, reset or button 默認是 button//autoShow:true, //默認false,自動顯示// hidden:false, //默認false，是否隱藏//hideMode:"offsets", //隱藏方式，默認display,可以取值：display，offsets，visibility//cls:"cssButton", //樣式定義,默認""//disabled:false, //是否可用，默認false// disabledClass:"", //默認x-item-disabled//enableToggle:true, //默認false//pressed:false, //設置按鈕是否已經被按下，默認是false//html:"Ext",//默認""// handleMouseEvents:true, //默認true,如果為false,那么mouseout mouseover就不能被觸發//x:number,y:number,在容器中的x,y坐標handler:function(){Ext.Msg.alert('提示消息框','測試Button組件：handler事件！');},//添加事件listeners:{//添加監聽事件 可以結合handler測試這兩個事件哪個最先執行"click":function(){Ext.Msg.alert('提示消息框','測試Button組件：listeners事件！');//Ext.getCmp("buttonName").hide();//隱藏按鈕}},//cls:"x-btn-text-icon",//添加圖標前需要設置該屬性//icon:"house.gif", //圖標的地址//plugins : Object/Array 擴展插件時使用// repeat:false, //默認false ,如果為true,需要設置mouseover事件renderTo:Ext.getDom("hello") //將組件的顯示效果渲染到某個節點的ID});});</script>
</head></head>
<body>
<div id="hello"></div></body>
</html>注意：handler注釋才會listeners，不然只會handler?
ETX系列：
EXT基礎
EXT表單
EXT表格
EXT事件
EXT窗口
EXT按鈕事件
總結
- 上一篇： 我的世界鞘翅怎么飞?
- 下一篇： EXT iconCls说明