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-->

你可能感兴趣的:(button)