ExtJs 学习之开篇（二） Observable 给类添加监听
html：代码
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="../../extjs-4.1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs-4.1.1/bootstrap.js"></script>
<script type="text/javascript" src="../../extjs-4.1.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="event.js"></script>
</head>
<body>
<button id="walk">walk</button>
<button id="eat">eat</button>
<button id="sleep">sleep</button>
</body>
</html>
event.js:代码
Ext.onReady(function(){
/**
* Ext 中事件分为自定义事件和浏览器事件
*/
/**
* 第一步定义Person,注册监听事件
*/
Ext.define("Person",{
extend:'Ext.util.Observable',//添加监听必须继承Observable
constructor:function(config){
this.name=config.name;
this.addEvents({
'walk':true,//监听名，是否启
'eat':true,
'sleep':true
});
this.listeners=config.listeners;
Person.superclass.constructor.call(this, config);
}
});
/**
* 给person 添加事件监听器
*/
var person=new Person({
name:'Longo',
listeners:{
walk:function(){
Ext.Msg.alert("event",person.name+" 再走啊走啊");
},
eat:function(breakfast,lunch,supper){
Ext.Msg.alert("event",person.name+" 要吃"+breakfast+","+lunch+" 和 "+supper);
},
sleep:function(time){
Ext.Msg.alert("event",person.name+" 从 "+time+" 开始睡觉");
}
}
});
Ext.get('walk').on('click',function(){
person.fireEvent('walk');
});
Ext.get('eat').on('click',function(){
person.fireEvent('eat','早餐','中餐','晚餐');
});
Ext.get('sleep').on('click',function(){
person.fireEvent('sleep',new Date());
});
});
浏览器事件
Ext.onReady(function(){
/**
* 元素的onclick事件，第一个绑定的事件会被第二个事件覆盖,
* 再Extjs你不用再担心这种事件
*/
var e=document.getElementById("walk");
e.onclick=function(){alert("handler1")};
e.onclick=function(){alert("handler2")};
/**
* 在ExtJs中，绑定的两次事件都会执行，不会发生第二次绑定覆盖掉第一次事件
*/
var te=Ext.get('walk');
te.on('click',function(){
alert("handler1");
});
te.on('click',function(){
alert("handler2");
});
});
