ExtJs 学习之开篇（二） Observable 给类添加监听

最新推荐文章于 2024-10-01 20:12:28 发布

weixin_30664539

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量70

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pwpw1218/p/3429579.html

版权

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.οnclick=function(){alert("handler1")};
   e.οnclick=function(){alert("handler2")};
   /**
   * 在ExtJs中，绑定的两次事件都会执行，不会发生第二次绑定覆盖掉第一次事件
   */
   var te=Ext.get('walk');
   te.on('click',function(){
       alert("handler1");
   });
   te.on('click',function(){
       alert("handler2");
   });

});