ExtJS4组件_button按钮配置-属性-方法详解

例子

[html]  view plain  copy

1. Ext.QuickTips.init();  
2. var buttonName =new Ext.Button({  
3. id:"buttonName",  
4. text:"Button组件基本用法",  
5. tooltip:"提示信息：Button组件基本用法",  
6. //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();  
7. tooltipType:"title",//定义显示提示信息的类型，有qtip和title两种方式，默认是qtip  
8. type:"button", //按钮类型：可以是submit, resetor button 　默认是 button  
9. autoShow:true,  //默认false,自动显示  
10. hidden:false,  //默认false，是否隐藏  
11. hideMode:"offsets", //隐藏方式，默认display,可以取值：display，offsets，visibility         
12. cls:"cssButton", //样式定义,默认""  
13. disabled:false, //是否可用，默认false  
14. disabledClass:"", //默认x-item-disabled  
15. enableToggle:true, //默认false  
16. pressed:false, //设置按钮是否已经被按下，默认是false  
17. handleMouseEvents:true,//默认true,如果为false,那么mouseout　mouseover就不能被触发  
18. //x:number,y:number,在容器中的x,y坐标   
19. handler:function(){  
20. Ext.Msg.alert('提示消息框','测试Button组件：handler事件！');  
21. },//添加事件  
22. listeners:{  
23. //添加监听事件可以结合handler测试这两个事件哪个最先执行  
24. "click":function(){  
25. Ext.Msg.alert('提示消息框','测试Button组件：listeners事件！');  
26. Ext.getCmp("buttonName").hide();//隐藏按钮  
27. }   
28. },  
29. cls:"x-btn-text-icon",//添加图标前需要设置该属性  
30. icon:"house.gif", //图标的地址  
31. //plugins : Object/Array　扩展插件时使用  
32. repeat:false,  //默认false ,如果为true,需要设置mouseover事件  
33. renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID  
34. });  
35.    

属性

[html]  view plain  copy

1. 1. id:"buttonName",  
2. 2. text:"Button组件基本用法",  
3. 3. tooltip:"提示信息：Button组件基本用法",//提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();  
4. 4. ooltipType:"title", //定义显示提示信息的类型，有qtip和title两种方式，默认是qtip  
5. 5. ype:"button", //按钮类型：可以是submit,reset or button 　默认是 button  
6. 6. autoShow:true,  //默认false,自动显示  
7. 7. hidden:false,  //默认false，是否隐藏  
8. 8. hideMode:"offsets", //隐藏方式，默认display,可以取值：display，offsets，visibility  
9. 9. cls:"cssButton", //样式定义,默认""  
10. 10. disabled:false, //是否可用，默认false  
11. 11. disabledClass:"",  //默认x-item-disabled  
12. 12. enableToggle:true, //默认false  
13. 13. pressed:false, //设置按钮是否已经被按下，默认是false  
14. 14. html:"Ext",//默认""  
15. 15. handleMouseEvents:true, //默认true,如果为false,那么mouseout　mouseover就不能被触发  
16. 16. x:number,y:number,在容器中的x,y坐标   
17. 17. handler:function(){  
18. Ext.Msg.alert('提示消息框','测试Button组件：handler事件！');  
19. }//添加事件  
20. 18. listeners:{//添加监听事件 可以结合handler测试这两个事件哪个最先执行  
21. "click":function(){  
22. Ext.Msg.alert('提示消息框','测试Button组件：listeners事件！');  
23. Ext.getCmp("buttonName").hide();//隐藏按钮  
24. }  
25. }  
26. 19. cls:"x-btn-text-icon",//添加图标前需要设置该属性  
27. 20. icon:"house.gif", //图标的地址  
28. 21. plugins : Object/Array　扩展插件时使用  
29. 22. repeat:false,  //默认false ,如果为true,需要设置mouseover事件  
30. 23. renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID  
31.    
32.    
33.   
34.    

方法

[html]  view plain  copy

1.    
2. 1. enable();激活按钮  
3. 2. disable();禁用按钮  
4. 3. destroy();消灭按钮  
5. 4. focus();按钮获取焦点  
6. 5. getText();获取按钮上的文本  
7. 6. hide();隐藏按钮  
8. 7. show();显示按钮  
9. 8. setText( String text );设置按钮上的文本  
10. 9. setVisible( Boolean visible );设置按钮是否隐藏  
11. 10. buttonName.purgeListeners();  
12. //使用该方法，意思是清除所有的监听事件，所以当执行该句后就不会再执行listeners的click事件了。按钮就不会被隐藏了。  
13. 11. buttonName.setHandler(fn);        
14. //也可以通过这种方式设置handler事件:  
15. buttonName.setHandler(function(){  
16. Ext.Msg.alert('提示消息框','测试Button组件：setHandler事件！');  
17. });  
18. 12. buttonName.on(eventName,fn);  
19.       //下面的事件可以自己测试下  
20. buttonName.on("click",function(){  
21. Ext.Msg.alert('提示消息框','测试Button组件：click事件！');  
22. });  
23. buttonName.on("mouseover",function(){  
24. Ext.Msg.alert('提示消息框','测试Button组件：mouseover事件！');  
25. });  
26. buttonName.on("mouseout",function(){  
27. Ext.Msg.alert('提示消息框','测试Button组件：mouseout事件！');  
28. });  
29.    
30.               
31. mouseout : ( Button this, Event e ) ;  
32. mouseover : ( Button this, Event e );  
33. beforedestroy : ( Ext.Component this ) ;  
34. beforehide : ( Ext.Component this ) ;  
35. beforerender : ( Ext.Component this )  
36. beforeshow : ( Ext.Component this )  
37. click : ( Button this, EventObject e )  
38. destroy : ( Ext.Component this )  
39. disable : ( Ext.Component this )  
40. enable : ( Ext.Component this )  
41. hide : ( Ext.Component this )  
42. show : ( Ext.Component this )  
43. render : ( Ext.Component this )  

转载地址：http://blog.csdn.net/middlekingt/article/details/8227136

版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/middlekingt/article/details/8227136