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/tigerking168/article/details/7483200