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

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

1. Ext.onReady(function(){   
2.               
3.             new Ext.Button({   
4.                  text:"确定",   
5.                 //将BUTTON画在BODY中   
6.                  renderTo:Ext.getBody(),   
7.                 //BUTTON的宽度   
8.                  minWidth:100,   
9.                  id:"mybutton"  
10.                 //点击事件   
11.                  handler:function(){   
12.                      Ext.MessageBox.show({   
13.                          title: '提示' ,   
14.                          msg: '你点击了我！' ,   
15.                          buttons: Ext.MessageBox.OK ,   
16.                          fn: function(){} ,   
17.                          icon: Ext.MessageBox.INFO   
18.                      });   
19.                  }   
20.          });   
21. });  

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
Javascript代码

1. Ext.onReady(function(){   
2.               
3.             new Ext.Button({   
4.                  text:"确定"  
5.                 //将BUTTON画在BODY中   
6.                  renderTo:Ext.getBody(),   
7.                 //BUTTON的宽度   
8.                  minWidth:100,   
9.                  id:"mybutton",   
10.                 //点击事件   
11.                  listeners:{   
12.                     "click":function(){   
13.                          Ext.MessageBox.show({   
14.                              title: '提示' ,   
15.                              msg: '你点击了我！' ,   
16.                              buttons: Ext.MessageBox.OK ,   
17.                              fn: function(){} ,   
18.                              icon: Ext.MessageBox.INFO   
19.                          });   
20.                      }   
21.                  }   
22.          });   
23. });  

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中的代码如下：
Javascript代码

1. Ext.onReady(function(){   
2.               
3.             new Ext.Button({   
4.                  text:"确定"  
5.                 //将BUTTON画在BODY中   
6.                  renderTo:Ext.getBody(),   
7.                 //BUTTON的宽度   
8.                  minWidth:100,   
9.                  id:"mybutton"  
10.          });   
11. });  

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

网页代码中如下：
Javascript代码

1. <script type="text/javascript">   
2.       
3.      Ext.onReady(function(){   
4.         //获得组件   
5.         var btn = Ext.getCmp("mybutton");   
6.         //绑定点击事件   
7.          btn.on("click" , function(){   
8.                          Ext.MessageBox.show({   
9.                              title: '提示' ,   
10.                              msg: '你点击了我！' ,   
11.                              buttons: Ext.MessageBox.OK ,   
12.                              fn: function(){} ,   
13.                              icon: Ext.MessageBox.INFO   
14.                          });   
15.                      });   
16.      });   
17.       
18. </script>