EXTJS学习系列基础篇:第六篇(转载)作者殷良胜,Ext组件系列之--button组件的基本用法
<div><img src="../Images/Menus/house.png" alt=""/>
<br />
<br />
<div id="Bind_Button"></div>
<br />
<script type="text/javascript">
function ready()
{
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:"../Images/Menus/house.png", //图标的地址
//plugins : Object/Array 扩展插件时使用
repeat:false, //默认false ,如果为true,需要设置mouseover事件
renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID
});
比较常用的方法 从字面上就能够理解它们的意思 还有更多的方法请参考Ext2.2官方文档
enable();disable();destroy();focus();getText();hide();show();
setText( String text );setVisible( Boolean visible );
使用该方法，意思是清除所有的监听事件，所以当执行该句后就不会再执行listeners的click事件了。按钮就不会被隐藏了。
buttonName.purgeListeners();
也可以通过这种方式设置handler事件:
buttonName.setHandler(function(){Ext.Msg.alert('提示消息框','测试Button组件：setHandler事件！');});
下面的事件可以自己测试下
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事件！');
});
比较常用的事件 从字面上就能够理解它们的意思 还有更多的方法请参考Ext2.2官方文档
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 )
}
Ext.onReady(ready);
</script>
</div>
