ExtJS笔记--Ext..Button组件

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

评论

1 楼 冬季到台北来看雨 2011-10-19  

多谢分享