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. });  

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. });  

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. });  

网页代码中如下：

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.      });