relayEvents传播分发事件

最新推荐文章于 2023-03-18 23:24:02 发布

iteye_9439

最新推荐文章于 2023-03-18 23:24:02 发布

阅读量403

点赞数

分类专栏： ExtJs 文章标签： relayEvents

ExtJs 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!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>无标题文档</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.7-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.7-gpl/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.0.7-gpl/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var Employee=Ext.extend(Ext.util.Observable,{
constructor:function(config){
this.name=config.name;
this.eat=function(){
this.fireEvent('startEat',this);//激发开始吃饭事件
this.fireEvent('finishEat',this);//激发结束吃饭事件
}
//加入自定义事件
this.addEvents({
"startEat":true,
"finishEat":true
});
// this.listeners=config.listeners;
Employee.superclass.constructor.call(this,config);
}
});
//定义服务员类
var Waiter=Ext.extend(Ext.util.Observable,{
constructor:function(config){
Waiter.superclass.constructor.call(this,config);
}
});
//创建员工对象
[color=red] window.emp=new Employee({name:'Tom'});[/color]
emp.addListener('startEat',function(){
alert(this.name+"开始吃饭了");
});
emp.addListener("finishEat",function(){
alert(this.name+"吃完饭，收拾盘子");
});
var waiter=new Waiter();
//使服务员对象与员工对象finishEat事件进行关联
//也就是说当员工对象finishEat事件发生后，先执行自身的事件监听器
//然后事件也会传递到服务员对象中，激发服务员对象的finishEat事件
[color=red]waiter.relayEvents(emp,['finishEat']);[/color]
waiter.on('finishEat',function(){
alert("服务员开始收拾");
});
});

</script>
</head>

<body>
<table>
<tr>
[color=red] <td><button type="button" id="btn" style="width:50px;height:30px;" value="ok" οnclick="window.emp.eat()" >确定</button></td>[/color]
</tr>
</table>
</body>
</html>

通过调用relayEvents方法可以实现事件在不同对象之间的传播和分发。