EXT中遵循一种树状的事件模型,所有继承自Ext.util.Observeable类的控件都可以支持事件。可以为这些继承了Ext.util.Observable的对象定义一些事件,然后为这些事件配置监听器。当某个事件发生时,Ext会自动调用监听器,这些就是Ext的事件模型。
1.首先定义个一个Person类, 及其自定义事件。
Ext.namespace("Ext.com.sunrex"); Ext.com.sunrex.Person = function(_name) { this.name = _name; this.addEvents("walk", "eat", "sleep"); } Ext.extend(Ext.com.sunrex.Person, Ext.util.Observable, { info: function(event) { return this.name + ' is ' + event + 'ing'; } });
以上实现了一个名称为Person的对象,他有一个属性name。初始化时,调用this.addEvents(...)函数,定义了三个事件:walk、eat、sleep,最后使用Ext.extend() 让Person继承Ext.util.Observable的所有属性。此外我们还加上了一个函数info(), 让它返回Person的信息。
2、在HTML中定义一个Person实例,然后为它的时间配置好监听器,如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HelloWorld.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../extjs_lib/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs_lib/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs_lib/ext-all.js"></script>
<script type="text/javascript" src="../js/A_004_HelloWorld.js"></script>
<script type="text/javascript">
var person = new Ext.com.sunrex.Person("张三 --> ");
person.addListener('walk', function() {
Ext.Msg.alert('event', person.name + "走呀走呀走!");
});
person.on("eat", function() {
Ext.Msg.alert('event', person.name + " 吃呀吃呀吃!");
});
person.on('sleep', function() {
Ext.Msg.alert('event', person.name + " 睡呀睡呀睡!");
});
function invokeWalk() {
person.fireEvent('walk');
}
Ext.onReady(function() {
Ext.get('eat').addListener('click', function() {
person.fireEvent('eat');
});
Ext.get('sleep').on('click', function() {
person.fireEvent('sleep');
});
});
</script>
</head>
<body>
<input type="hidden" id="h">
<input type="button" id="walk" value="walk" οnclick="invokeWalk()"><br>
<input type="button" id="eat" value="eat"><br>
<input type="button" id="sleep" value="sleep"><br>
</body>
</html>
上面的on就是addListener()的简写形式,功能完全一样。第一个参数是事件的名称,第二个参数是事件发生时要执行的函数。
同理un是removeListener()的简写形式。
还有一个函数purgeListeners(),他可以办所有的监听器都删除。