为底层元素注册监听器
为底层元素注册监听器
例5.18
代码：
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>为底层元素注册事件</title>
<!--导入Ext，这里省略-->
<script
type="text/javascript"
src="ExtEventBasic2.js"></script>
</head>
<body>
<button
id="myBtn">按钮</button>
</body>
</html>
Ext.onReady(function(){
Ext.EventManager.on('myBtn','click',function(e){
alert("按钮被点击");
})
})
解析：
使用Ext.EventManager为button标签添加点击监听，这种方式在第1节的例子中已经做过初步解析。在第1节的例子中我们自己手动封装了一个EventManager对底层元素的事件进行处理，这里的接口和我们自定义的非常相像。这种调用方式实在很无趣，来看Ext还为EventManager提供了哪些特性，如图5-38所示。
这个统一接口on除了提供了使用频率非常高的前3个参数之外，还提供了scope和options两个备用参数。这两个是我们自己封装事件工具时所没有考虑到的，来观摩一下它们的用法。
scope这个参数我们再熟悉不过了，这是用来配置监听函数中this所指向对象的。修改一下以上代码：
Ext.EventManager.on('myBtn','click',function(e){
alert(this);
})
默认就是触发事件的Button按钮。再手工指定一个不同的对象：
Ext.EventManager.on('myBtn','click',function(e){
alert(Ext.encode(this));
},{name:"漠漠",age:25})
显然，第3个参数可以指定为任意对象。如果传递了scope这个参数，监听函数里面的this到底指向谁，开发者自己必须清楚。
再来看第4个可选的配置参数，如图5-41所示。
一共可以支持10个配置选项，其中带下画线的5个比较常用。
在第2章对DOM操作的分析中我们知道，Ext.Element这个类是对底层DOM节点的封装，通过Ext.Element，Ext为DOM节点扩展了一系列的工具函数。同时，我们知道Ext中的那些丰富的UI界面，其实质就是一层一层的DIV嵌套而已。由于Ext需要频繁地操纵这些底层的标签，因此在源码中，Ext更偏向于使用自己封装的Ext.Element来操纵底层元素，而不是直接面对这些原生HTML标签。
对于事件机制，Ext同样坚持了这种原则。Ext的实现代码中一般不会直接使用EventManger为底层标签注册事件监听函数，而是通过Ext.Element间接地进行，尤其是在构建复杂UI组件，例如Ext.Panel的时候。在Ext.Element的源码中，你会发现如图5-42所示的惊喜。
Ext.Element自己并没有做什么实际的工作，它把所有事情都悄悄地交给EventManger去完成，自己只是坐享其成而已。这是一种最简单的“代理模式”。
——本段文字节选自《EXT江湖》
图书详细信息:
http://www.cnblogs.com/broadview/archive/2012/01/20/2327735.html
