前台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 });