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 )