按钮是一种非常常见的控件，ExtJS中按钮在Ext.Button中，新建一个Button.html网页，其内容如下：
<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01//EN”>
<html>
<head>
<meta http-equiv=”Content-Type”content=”text/html; charset=UTF-8; user-scalable=no”>
<title>按钮</title>
<link rel=”stylesheet”type=”text/css” href=”resources/css/ext-all.css”/>
<scripttype=”text/javascript” src=”bootstrap.js”></script>
<script type=”text/javascript” src=”Buttons.js”></script>
</head>
<body>
<div id=”myDiv” width=”100%”height=500></div>
</body>
</html>
然后新建Button.js文件，其内容如下：
Ext.onReady(function(){
var myButton01 = Ext.create(‘Ext.Button’,
{
id:’button01’,
text:’这是一个按钮’,
x:10,
y:20,
height:30,
width: 80,
href :’http://www.ctgu.edu.cn’, //添加热链接
renderTo: ‘myDiv’,
listeners:{//添加监听事件
“click”:function(){ //事件为click
Ext.Msg.alert(‘提示’,’这是一个listeners事件(click)！’);
//this.hide();//隐藏按钮
//myButton01.hide();//隐藏按钮
Ext.getCmp(“button01”).hide();//隐藏按钮
}
}
});
});
浏览网页Button.html时，即出现一个按钮，当点击该按钮的时候出现消息提示窗口，同时按钮会隐藏。注意上面的代码中，text属性为按钮上显示的文字内容，x和y表示按钮在容器中的位置，height和width分别表示按钮的高度和宽度，如果需要点击按钮时出现热链接，则添加href属性，最后设置renderTo为html中添加的div，如果还需要为按钮添加其他监听的事件，如点击按钮click事件等，则在listeners中添加。同样，若要添加鼠标离开事件，则同样在click后接着添加mouseout事件，如下：
listeners:{//添加监听事件
“click”:function(){ //事件为click
Ext.Msg.alert(‘提示’,’这是一个listeners事件(click)！’);
//this.hide();//隐藏按钮
//myButton01.hide();//隐藏按钮
Ext.getCmp(“button01”).hide();//隐藏按钮
},
“mouseout”:function(){ //鼠标离开事件
Ext.Msg.alert(‘提示’,’您的鼠标离开了按钮！’);
}
}
除了click、mouseout事件以外，还有mouseover、resize、move、disable、enable等等事件，这些都可以通过查询帮助文档得知。
如果需要为按钮添加图标，可以通过设置其icon属性来获取，如：
icon:’images//add16.gif’, //图标文件路径
其结果如下：
前面是为按钮添加的监听事件，当监听到click事件或mouseout事件的时候执行其相应的函数。除了可以通过listeners配置项来监听按钮的事件，还可以通过handler配置项来添加监听事件，但是如果采用handler配置项，那么需要设置clickEvent配置项的值（默认为click，即单击），而且保证handleMouseEvents配置项值为true。如要实现鼠标离开事件，则设置clickEvent为mouseout,，同时通过handler配置项添加相应的函数，如下：
clickEvent:’mouseout’,//事件类型：鼠标离开
handler:function(){ //添加事件
Ext.Msg.alert(‘提示’,’您的鼠标离开了按钮,这是通过handler！’);
有时候在IE浏览器上采用handler方式添加事件无法处理，但是通过listeners配置项添加监听事件则可以。
扫一扫
3419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
