ExtJS Button的事件和方法定義

ExtJS Button的事件和方法定義： 

Ext.onReady(function(){
                //構造函數的參數傳入一個字面量- renderTo, text
                //minWidth最小寬度，無論字有多大都是100像素寬度
                //handler:指定一個函數句柄，在默認事件觸發時的函數調用
                //此時的默認事件為click
                //這是事件定義的第一種方法
                var _button = new Ext.Button({
                    //Ext.getBody().dom == document.body;
                    renderTo: Ext.getBody(),
                    text: "確定",
                    minWidth: 100,
                    handler: function(){
                        alert("歡迎學習ExtJS");
                    }
                });
                //text是Ext.Button的只讀屬性
                alert(_button.text);
                //setText是Ext.Button的設置Text方法
                _button.setText("取消");

                //listeners是在對象在被初始化前，就將一系列事件定義的手段
                //這是事件定義的第二種方法（推薦程度5顆星）
                var button2 = new Ext.Button({
                        renderTo: Ext.getBody(),
                        text: "Listeners Test",
                        minWidth:100,
                        listeners:{
                               "click":function(){
                                      alert("Listeners Test");
                               }
                        }
                });

               //這是事件定義的第三種方法
               var _button3 = new Ext.Button({
           renderTo: Ext.getBody(),
           text: "On方法的事件定義",
                        minWidth:100
                });
               _button3.on("click", function(){
                        alert("on的事件方法");
               });
            });

extjs  button  用法： 

Ext.QuickTips.init();
        var buttonName = new Ext.Button({
  id:"buttonName",
               text:"Button組件基本用法",
               tooltip:"提示信息：Button組件基本用法",
   //提示信息,如果需要顯示提示信息，需要使用Ext.QuickTips.init();

              tooltipType:"title", //定義顯示提示信息的類型，有qtip和title兩種方式，默認是qtip

              type:"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:"Bind_Button" //將組件的顯示效果渲染到某個節點的ID

        });

配置： 
1. id:"buttonName", 
2. text:"Button組件基本用法", 
3. tooltip:"提示信息：Button組件基本用法", //提示信息,如果需要顯示提示信息，需要使用Ext.QuickTips.init(); 
4. ooltipType:"title", //定義顯示提示信息的類型，有qtip和title兩種方式，默認是qtip 
5. ype:"button", //按鈕類型：可以是submit, reset or button 　默認是 button 
6. autoShow:true,  //默認false,自動顯示 
7. hidden:false,  //默認false，是否隱藏 
8. hideMode:"offsets", //隱藏方式，默認display,可以取值：display，offsets，visibility 
9. cls:"cssButton", //樣式定義,默認"" 
10. disabled:false, //是否可用，默認false 
11. disabledClass:"",  //默認x-item-disabled 
12. enableToggle:true, //默認false 
13. pressed:false, //設置按鈕是否已經被按下，默認是false 
14. html:"Ext",//默認"" 
15. handleMouseEvents:true, //默認true,如果為false,那么mouseout　mouseover就不能被觸發 
16. x:number,y:number,在容器中的x,y坐標  
17. handler:function(){Ext.Msg.alert('提示消息框','測試Button組件：handler事件！');},//添加事件 
18. listeners:{//添加監聽事件 可以結合handler測試這兩個事件哪個最先執行 
         "click":function(){ 
             Ext.Msg.alert('提示消息框','測試Button組件：listeners事件！'); 
             Ext.getCmp("buttonName").hide();//隱藏按鈕 
           } 
   }, 
19. cls:"x-btn-text-icon",//添加圖標前需要設置該屬性 
20. icon:"house.gif", //圖標的地址 
21. plugins : Object/Array　擴展插件時使用 
22. repeat:false,  //默認false ,如果為true,需要設置mouseover事件 
23. renderTo:"Bind_Button" //將組件的顯示效果渲染到某個節點的ID 
常用方法： 
1. enable();激活按鈕 
2. disable();禁用按鈕 
3. destroy();消滅按鈕 
4. focus();按鈕獲取焦點 
5. getText();獲取按鈕上的文本 
6. hide();隱藏按鈕 
7. show();顯示按鈕 
8. setText( String text );設置按鈕上的文本 
9. setVisible( Boolean visible );設置按鈕是否隱藏 
10. buttonName.purgeListeners(); 
//使用該方法，意思是清除所有的監聽事件，所以當執行該句后就不會再執行listeners的click事件了。按鈕就不會被隱藏了。 
11. buttonName.setHandler(fn);       
        //也可以通過這種方式設置handler事件: 
        buttonName.setHandler(function(){Ext.Msg.alert('提示消息框','測試Button組件：setHandler事件！');}); 
12. buttonName.on(eventName,fn); 
       //下面的事件可以自己測試下 
        buttonName.on("click",function(){ 
            Ext.Msg.alert('提示消息框','測試Button組件：click事件！'); 
        }); 
         buttonName.on("mouseover",function(){ 
            Ext.Msg.alert('提示消息框','測試Button組件：mouseover事件！'); 
        }); 
        buttonName.on("mouseout",function(){ 
            Ext.Msg.alert('提示消息框','測試Button組件：mouseout事件！'); 
        }); 
             
mouseout : ( Button this, Event e ) ; 
mouseover : ( Button this, Event e ); 
beforedestroy : ( Ext.Component this ) ; 
beforehide : ( Ext.Component this ) ; 
beforerender : ( Ext.Component this ) 
beforeshow : ( Ext.Component this ) 
click : ( Button this, EventObject e ) 
destroy : ( Ext.Component this ) 
disable : ( Ext.Component this ) 
enable : ( Ext.Component this ) 
hide : ( Ext.Component this ) 
show : ( Ext.Component this ) 
render : ( Ext.Component this ) 
<!--EndFragment-->