EXTJS学习系列基础篇:第六篇(转载)作者殷良胜,Ext组件系列之--button组件的基本用法

<div><img src="../Images/Menus/house.png" alt=""/>
    <br />
    <br />
    <div id="Bind_Button"></div>
    <br />
    <script type="text/javascript">    
    function ready()
    {
        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:"../Images/Menus/house.png", //图标的地址
              
              //plugins : Object/Array　扩展插件时使用
              
              repeat:false,  //默认false ,如果为true,需要设置mouseover事件
              
              renderTo:"Bind_Button"  //将组件的显示效果渲染到某个节点的ID
              
        });         
        
        比较常用的方法　从字面上就能够理解它们的意思　还有更多的方法请参考Ext2.2官方文档
        enable();disable();destroy();focus();getText();hide();show();
        setText( String text );setVisible( Boolean visible );
        
        使用该方法，意思是清除所有的监听事件，所以当执行该句后就不会再执行listeners的click事件了。按钮就不会被隐藏了。
        buttonName.purgeListeners();
        
        也可以通过这种方式设置handler事件:
        buttonName.setHandler(function(){Ext.Msg.alert('提示消息框','测试Button组件：setHandler事件！');});
        
        
        下面的事件可以自己测试下
        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事件！');
        });

               
        比较常用的事件　从字面上就能够理解它们的意思　还有更多的方法请参考Ext2.2官方文档
        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 ) 
        
    }
    Ext.onReady(ready);
    </script>
    </div>

本文转自温景良博客园博客，原文链接：http://www.cnblogs.com/wenjl520/archive/2008/11/03/1325548.html，如需转载请自行联系原作者