按钮是一种非常常见的控件，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配置项添加监听事件则可以。
分享到：
相关推荐
五按钮五角星幻灯片关系图素材下载，关键词：PPT按钮，幻灯片图表素材，PPT关系图，五角星，PPT文本框，PPTX格式；
五按钮五角星幻灯片关系图素材下载，关键词：PPT按钮，幻灯片图表素材，并列关系PPT关系图，五角星，PPT文本框，PPTX格式； 五按钮五角星幻灯片关系图素材下载，关键词：PPT按钮，幻灯片图表素材，并列关系PPT关系图...
android页面布局fragment五个按钮切换页面
bootstrap五等分代码CSS和圆形按钮css，讲文档添加到bootstrap.css的最后直接写class即可。非常好用
jQuery实现按钮滑动切换
JS五张连篇，点击左右按钮可以移动！（图片左右滚动特效）主要用于想实现图片左右能滚动，点击左右按钮图片可以移动！！不错的！
6种Web前端多彩的按钮（五）
图片按顺序不间断的轮换显示，并且对应的图片按钮颜色发生改变
实验五 按钮联锁的三相异步电动机正反转控制线路 12 实验六 双重联锁的三相异步电动机正反转控制线路 15 实验七 三相异步电动机星形/三角形起动控制线路 17 实验八 三相异步电动机的顺序控制线路 20 实验九 三相异步...
这个示例演示异形按钮 圆形 五角星 螺旋形 箭头 的用法 本示例程序涉及到 触摸事件onTouch 焦点变化事件onFocusChange 键盘事件onKey
PS五种水晶按钮制作教程集合.doc
Android自定义view：十字...在代码中也给出了另外五个普通按钮进行与十字按钮进行效果对比，亦可以学习自定义组件的消息派发机制.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
按钮发信(五).rar按钮发信(五).rar按钮发信(五).rar按钮发信(五).rar按钮发信(五).rar按钮发信(五).rar
是电脑高手常用的五个按钮，让你轻松成为电脑高手啊
五屏切换XP按钮风格焦点图，实现物品切换，可以看看。
APT创立于1993年，专门生产按钮、指示灯等低压产品，是中国领先的低压控制部件制造商。APT系列产品通过多年的推广和应用，广泛服务于中国的电力、机械、钢铁、冶金、石化、交通、水处理、食品、包装、纺织、港口、...
五屏切换XP按钮风格焦点图
APT创立于1993年，专门生产按钮、指示灯等低压产品，是中国领先的低压控制部件制造商。APT系列产品通过多年的推广和应用，广泛服务于中国的电力、机械、钢铁、冶金、石化、交通、水处理、食品、包装、纺织、港口、...
视频直播系统 2018第五章 自定义播放器播放控制按钮