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

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

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

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

网页代码中如下：

<SPAN class=string><FONT color=#0000ff>"text/javascript"</FONT></SPAN><SPAN>> &nbsp;&nbsp;</SPAN></SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp; Ext.onReady(</SPAN><SPAN class=keyword><STRONG><FONT color=#7f0055>function</FONT></STRONG></SPAN><SPAN>(){ &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SPAN><SPAN class=comment><FONT color=#008200>//获得组件 </FONT></SPAN><SPAN>&nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SPAN><SPAN class=keyword><STRONG><FONT color=#7f0055>var</FONT></STRONG></SPAN><SPAN> btn = Ext.getCmp(</SPAN><SPAN class=string><FONT color=#0000ff>"mybutton"</FONT></SPAN><SPAN>); &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SPAN><SPAN class=comment><FONT color=#008200>//绑定点击事件 </FONT></SPAN><SPAN>&nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; btn.on(</SPAN><SPAN class=string><FONT color=#0000ff>"click"</FONT></SPAN><SPAN> , </SPAN><SPAN class=keyword><STRONG><FONT color=#7f0055>function</FONT></STRONG></SPAN><SPAN>(){ &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ext.MessageBox.show({ &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: </SPAN><SPAN class=string><FONT color=#0000ff>'提示'</FONT></SPAN><SPAN> , &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; msg: </SPAN><SPAN class=string><FONT color=#0000ff>'你点击了我！'</FONT></SPAN><SPAN> , &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; buttons: Ext.MessageBox.OK , &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fn: </SPAN><SPAN class=keyword><STRONG><FONT color=#7f0055>function</FONT></STRONG></SPAN><SPAN>(){} , &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; icon: Ext.MessageBox.INFO &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;</SPAN>
<LI><SPAN>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</SPAN>
<LI><SPAN>