ExtJS Button的事件和方法定义

ExtJS Button的事件和方法定义 

ExtJS Button的事件和方法定义：

Js代码 

1 Ext.onReady(function(){ 

2 //构造函数的参数传入一个字面量- renderTo, text  

3 //minWidth最小宽度，无论字有多大都是100像素宽度  

4 //handler:指定一个函数句柄，在默认事件触发时的函数调用  

5 //此时的默认事件为click  

6 //这是事件定义的第一种方法  

7 var _button = new Ext.Button({ 

8 //Ext.getBody().dom == document.body;  

9 renderTo: Ext.getBody(), 

10 text: "确定", 

11 minWidth: 100, 

12 handler: function(){ 

13 alert("欢迎学习ExtJS"); 

14 } 

15 }); 

16 //text是Ext.Button的只读属性  

17 alert(_button.text); 

18 //setText是Ext.Button的设置Text方法  

19 _button.setText("取消"); 

20 

21 //listeners是在对象在被初始化前，就将一系列事件定义的手段  

22 //这是事件定义的第二种方法（推荐程度5颗星）  

23 var button2 = new Ext.Button({ 

24 renderTo: Ext.getBody(), 

25 text: "Listeners Test", 

26 minWidth:100, 

27 listeners:{ 

28 "click":function(){ 

29 alert("Listeners Test"); 

30 } 

31 } 

32 }); 

33 

34 //这是事件定义的第三种方法  

35 var _button3 = new Ext.Button({ 

36 renderTo: Ext.getBody(), 

37 text: "On方法的事件定义", 

38 minWidth:100 

39 }); 

40 _button3.on("click", function(){ 

41 alert("on的事件方法"); 

42 }); 

43 }); 

extjs button 用法：

Js代码  

44 Ext.QuickTips.init(); 

45 var buttonName = new Ext.Button({ 

46 id:"buttonName", 

47 text:"Button组件基本用法", 

48 tooltip:"提示信息：Button组件基本用法", 

49 //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();  

50 

51 tooltipType:"title", //定义显示提示信息的类型，有qtip和title两种方式，默认是qtip  

52 

53 type:"button", //按钮类型：可以是submit, reset or button 　默认是 button  

54 

55 autoShow:true, //默认false,自动显示  

56 

57 hidden:false, //默认false，是否隐藏  

58 

59 hideMode:"offsets", //隐藏方式，默认display,可以取值：display，offsets，visibility  

60 

61 cls:"cssButton", //样式定义,默认""  

62 

63 disabled:false, //是否可用，默认false  

64 

65 disabledClass:"", //默认x-item-disabled  

66 

67 enableToggle:true, //默认false  

68 

69 pressed:false, //设置按钮是否已经被按下，默认是false  

70 

71 html:"Ext",//默认""  

72 

73 handleMouseEvents:true, //默认true,如果为false,那么mouseoutmouseover就不能被触发  

74 

75 //x:number,y:number,在容器中的x,y坐标  

76 

77 handler:function(){Ext.Msg.alert('提示消息框','测试Button组件：handler事件！');},//添加事件  

78 

79 listeners:{//添加监听事件 可以结合handler测试这两个事件哪个最先执行  

80 "click":function(){ 

81 Ext.Msg.alert('提示消息框','测试Button组件：listeners事件！'); 

82 Ext.getCmp("buttonName").hide();//隐藏按钮  

83 } 

84 }, 

85 

86 cls:"x-btn-text-icon",//添加图标前需要设置该属性  

87 

88 icon:"house.gif", //图标的地址  

89 

90 //plugins : Object/Array　扩展插件时使用  

91 

92 repeat:false, //默认false ,如果为true,需要设置mouseover事件  

93 

94 renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID  

95 

96 }); 

配置：
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,那么mouseoutmouseover就不能被触发
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-->