前台HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all-neptune-debug.css">
<script type="text/javascript" src="js/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="js/extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/all.js"></script>
<title>ExtJS</title>
</head>
<body>
<body>
<button id="walk">walk</button>
<button id="eat">eat</button>
<button id="sleep">sleep</button>
</body>
</body>
</html>

JS代码:

 Person = function(name) {
// ExtJS 4 中一定要这句构造函数
Person.superclass.constructor.call(this, name);
this.name = name;
this.addEvents("walk", "eat", "sleep");
}; Ext.extend(Person, Ext.util.Observable, {
info : function(event) {
return this.name + ' is ' + event + 'ing.';
}
}); Ext.onReady(function() {
Ext.get('walk').on('click', function() {
person.fireEvent('walk');
}); Ext.get('eat').on('click', function() {
person.fireEvent('eat', '早餐', '中餐', '晚餐');
}); Ext.get('sleep').on('click', function() {
// 此处不能用time = new Date(),然后time.format("H")了
person.fireEvent('sleep', Ext.Date.format(new Date(), 'H'));
}); var person = new Person('Lingo');
person.on('walk', function() {
Ext.Msg.alert('event', person.name + "在走啊走啊。");
});
person.on('eat', function(breakfast, lunch, supper) {
Ext.Msg.alert('event', person.name + "要吃" + breakfast + "," + lunch + "和" + supper + "。");
});
person.on('sleep', function(time) {
Ext.Msg.alert('event', person.name + "从" + time + "点开始睡觉啦。");
});
});

ExtJS 4.2 中自定义事件的更多相关文章

  1. Extjs中自定义事件

    //Ext中所谓的响应事件,响应的主要是组件中已经定义的事件(通过看api各组件的events可以找到)         //主要作用就是利用on调用各组件的事件处理函数,然后在函数中作用户想要的操作 ...

  2. javascript中自定义事件

    自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用. function ...

  3. 使用jQuery在javascript中自定义事件

    js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...

  4. php中自定义事件---事件驱动

    PHP中自定义事件驱动,处理机制. 原文:https://www.cnblogs.com/mafeifan/p/4322271.html ------------------------------- ...

  5. Vue中调用另一个组件中自定义事件

    之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...

  6. 1 .net中自定义事件的步骤

    1 申明一个自定义的类并且继承事件的基类 public class ClientSocketModelConnectedEvent:EventArgs { private string param; ...

  7. js中自定义事件,使用了jQuery

    $(function(){ $('#btn').bind("myClick", function(){ //自定义myClick事件 $('#test').append(" ...

  8. JS中自定义事件的使用与触发

    1. 事件的创建 JS中,最简单的创建事件方法,是使用Event构造器: var myEvent = new Event('event_name'); 但是为了能够传递数据,就需要使用 CustomE ...

  9. nodejs 中自定义事件

    经常看到 req.on('error', function(){...}); 这种代码. 在nodejs中,可以使用 EventEmitter来实现. 具体的关键词有如下几个: var reqEven ...

随机推荐

  1. 数据库表转换成javaBean对象小工具

    package test.utils; import java.io.FileWriter;import java.io.IOException;import java.io.PrintWriter; ...

  2. Learning Puppet — Resources and the RAL

    Learning Puppet — Resources and the RAL Welcome to Learning Puppet! This series covers the basics of ...

  3. 【转】VS2013 C#WinForm程序构造界面拖动控件NumericUpDown时"未响应“是有道词典惹的祸

    很久之前遇到过因为金山词霸和其他软件冲突导致的程序无响应的情况. 没想到今天情况重现,VS2013在可视化编辑NumbericUpDown控件的时候,又出现了”未响应“,发现又是有道词典惹的祸. 可见 ...

  4. jdbc:java数据库连接

    1.导jar包 四大参数: 1.加载驱动类:Class.forName("com.mysql.jdbc.Driver"); 2.url:jdbc:mysql://localhost ...

  5. sublime运行c++快捷建修改

    打开preferences->key bingings -user 输入 [ {"keys": ["f9"], "command": ...

  6. 51nod 1120 机器人走方格 V3 卡特兰数 lucas定理

    N * N的方格,从左上到右下画一条线.一个机器人从左上走到右下,只能向右或向下走.并要求只能在这条线的上面或下面走,不能穿越这条线,有多少种不同的走法?由于方法数量可能很大,只需要输出Mod 100 ...

  7. cf 645F Cowslip Collections 组合数学 + 简单数论

    http://codeforces.com/contest/645/problem/F F. Cowslip Collections time limit per test 8 seconds mem ...

  8. NeHe OpenGL教程 第十八课:二次几何体

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  9. HTML5列表、块、布局

    一.列表 <ol>  无序列表  (每项前有.) <ul>  有序列表   (每项前有编号1,,2,3) <li>   列表项 <ul type=" ...

  10. 动态WebService方法

    [转] 调用Webservice的方法一般是通过右击项目-->添加服务引用-->输入Webservice地址-->前往-->确定,这样可以顺利调用服,但是需要注意的一点是:如果 ...