ExtJS 4.2 中自定义事件

前台HTML：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all-neptune-debug.css">
 6 <script type="text/javascript" src="js/extjs/ext-all-debug.js"></script>
 7 <script type="text/javascript" src="js/extjs/locale/ext-lang-zh_CN.js"></script>
 8 <script type="text/javascript" src="js/all.js"></script>
 9 <title>ExtJS</title>
10 </head>
11 <body>
12 <body>
13     <button id="walk">walk</button>
14     <button id="eat">eat</button>
15     <button id="sleep">sleep</button>
16 </body>
17 </body>
18 </html>

JS代码：

 1 Person = function(name) {
 2     // ExtJS 4 中一定要这句构造函数
 3     Person.superclass.constructor.call(this, name);
 4     this.name = name;
 5     this.addEvents("walk", "eat", "sleep");
 6 };
 7 
 8 Ext.extend(Person, Ext.util.Observable, {
 9     info : function(event) {
10         return this.name + ' is ' + event + 'ing.';
11     }
12 });
13 
14 Ext.onReady(function() {
15     Ext.get('walk').on('click', function() {
16         person.fireEvent('walk');
17     });
18 
19     Ext.get('eat').on('click', function() {
20         person.fireEvent('eat', '早餐', '中餐', '晚餐');
21     });
22 
23     Ext.get('sleep').on('click', function() {
24         // 此处不能用time = new Date()，然后time.format("H")了
25         person.fireEvent('sleep', Ext.Date.format(new Date(), 'H'));
26     });
27 
28     var person = new Person('Lingo');
29     person.on('walk', function() {
30         Ext.Msg.alert('event', person.name + "在走啊走啊。");
31     });
32     person.on('eat', function(breakfast, lunch, supper) {
33         Ext.Msg.alert('event', person.name + "要吃" + breakfast + "，" + lunch + "和" + supper + "。");
34     });
35     person.on('sleep', function(time) {
36         Ext.Msg.alert('event', person.name + "从" + time + "点开始睡觉啦。");
37     });
38 });