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");
    });
    
});

ExtJs 学习之开篇（二） Observable 给类添加监听的更多相关文章

  1. extjs 学习笔记（二）

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

  2. JavaScript学习总结(十二)——JavaScript编写类

    在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...

  3. android菜鸟学习笔记23----ContentProvider(三)利用内置ContentProvider监听短信及查看联系人

    要使用一个ContentProvider,必须要知道的是它所能匹配的Uri及其数据存储的表的结构. 首先想办法找到访问短信及联系人数据的ContentProvider能接受的Uri: 到github上 ...

  4. java web hello world（二）基于Servlet理解监听

    java web最开始实现是通过Servlet实现,这里就来实现下,最原始的监听是如何实现的. 第一步,创建一个基本的web项目 ,参见(java web hello world(一)) 第二步,we ...

  5. Extjs学习笔记--（二）

    1.配置实用Extjs <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" /&g ...

  6. [转]ExtJS学习笔记（二）：handler与listener的区别

    原文地址:http://blog.csdn.net/smilingleo/article/details/3733177 ExtJS里handler和listener都是用来对用户的某些输入进行处理的 ...

  7. ExtJs 学习之开篇（-）之define

    Ext.onReady(function(){    /**     * test1,声明一个类,定义类中的方法     */ Ext.define("demo.Demo",{   ...

  8. 【C#】第3章学习要点（二）自定义类和结构

    分类:C#.VS2015 创建日期:2016-06-19 使用教材:(十二五国家级规划教材)<C#程序设计及应用教程>(第3版) 一.要点概述 别人提供的类都是为了简化你的工作量用的,可是 ...

  9. Cocos2d-x学习笔记（二）AppDelegate类详解

    由源代码,可得到如下的类继承关系: 1. 在方法applicationDidFinishLaunching中,首先会调用CCDirector* pDirector = CCDirector::shar ...

随机推荐

  1. Chinese economic influence in North Korea

    Where this new investment is being targeted is also interesting雄性禿 . "If you look at the econom ...

  2. 第3.3 案例2: 工作队列 job queue

    第2个案例就是工作队列,典型的点对点的消息,一个Producer发送一个工作消息到队列去,具有Listener类的Consumer能够从工作队列中获得一个工作情况的消息,这个消息被这个消费者消费掉之后 ...

  3. 一个比较综合的项目--》>图片缓存，下拉刷新等

    在办公室电脑(E:\workspace\23\Collections)

  4. 程序测试用的IE浏览器第二次无法加载入口程序的问题及其解决方法

    注:针对的是C#程序(Silverlight) 第一步.找到入口程序所在的路径,以记事本形式打开<入口程序.csproj>,由于之前配置入口程序时,设置了“Use Local IIS We ...

  5. php7.0支持调用lua脚本

    需求前瞻: 最近因需求,需要支持php调用现有的Lua代码,可以减少php的代码量,同时在维护上也比较方便,不会照成需求变更,需要同时修改两份代码 第一步:安装php7.0及以上版本,此处安装方法就略 ...

  6. VS2010编译Boost 1.57 静态链接库

    http://www.cnblogs.com/cuish/p/4175491.html 0.前提 Boost库版本 1.57.0 下载地址 http://www.boost.org/users/his ...

  7. 多线程随笔知识点总结-NSThread4.1

    线程的状态 状态说明 a.新建 实例化线程对象 b.就绪 向线程对象发送start消息,线程对象被加入可调度线程池等待CPU调度;detach方法和performSelectorInBackGroun ...

  8. c++unsigned char的输出问题

    unsigned char的范围是0~255,在用cout输出的时候要显示数字的话记得进行int的强制转化才可以,否则都是输出的字符,除此之外的所有比较转换成整数在做比较吧 除此之外,在最近的项目里由 ...

  9. Uncaught ReferenceError: WebForm_DoPostBackWithOptions is not defined

    环境:Asp.Net网站,Framework版本4.0,IIS版本7.0问题:按钮失效,下面是按钮代码: <a id="dnn_ctr1161_Login_Login_DNN_cmdL ...

  10. RaphaelJS实践--猫和老鼠矢量图展示

    (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/tomAndJerryRaphaelVectorGr ...