您的位置：首页 > Web前端 > JavaScript

EXT JS点滴（3）EXT JS 事件机制

2009-09-15 16:05 169 查看
在这一节中，我将通过一些实例来跟大家讨论一下，EXT JS中事件的处理方式

第一个事件例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EXT JS点滴（3）事件处理</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<style>
.red{
background:#F00;
}
</style>
</head>
<script>

function openWin()
{
var win=new Ext.Window({
title:"事件处理",
height:200,
width:300,
maximizable:true,
bodyStyle:{padding:"5px"},
html:"<p>事件处理例子1</p>"
});

win.show();
}

Ext.onReady(
function(){
Ext.select("div:odd").addClass("red");
Ext.select("div:odd").on("click",openWin);//监听奇数行Div的click事件
}
);
</script>
<body>
<div >第1个DIV</div>
<div >第2个DIV</div>
<div >第3个DIV</div>
<div >第4个DIV</div>
</body>
</html>


运行结果如下：



第二个事件处理例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EXT JS点滴（3）事件处理</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<style>
.red{
background:#F00;
}
</style>
</head>
<script>

function openWin()
{
var win=new Ext.Window({
title:"事件处理",
height:200,
width:300,
maximizable:true,
bodyStyle:{padding:"5px"},
html:"<p>事件处理例子2</p>"
});

win.show();
}

Ext.onReady(
function(){
Ext.get("evtBtn").on("click",openWin);//监听按钮的click事件
}
);
</script>
<body>
<input type="button" id="evtBtn" value="点我，吓死你"/>
</body>
</html>


运行效果如下：



第三个事件处理例子（延时执行事件）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EXT JS点滴（3）事件处理</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<style>
.red{
background:#F00;
}
</style>
</head>
<script>

function openWin()
{
var win=new Ext.Window({
title:"事件处理",
height:200,
width:300,
maximizable:true,
bodyStyle:{padding:"5px"},
html:"<p>事件处理例子3</p>"
});

win.show();
}

Ext.onReady(
function(){
Ext.get("evtBtn").on("click",openWin);//监听按钮的click事件
Ext.get("evtBtn").on("click",openWin,this,{delay:5000});//延迟执行事件
}
);
</script>
<body>
<input type="button" id="evtBtn" value="点我，吓死你"/>
</body>
</html>


执行5秒后，用鼠标移开，会看到两个窗口。结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航