Ext 事件驱动

１、事件驱动编程概述
　　事件及事件处理其实就是当用户执行某一个操作，或者是对象进入某一个状态时，会给哪些关心这个动作及状态的对象发送一个通知，那些对象（监听者）接受到通知后，会作具体的响应。比如说，当用户移动或点击一下鼠标、者按下键盘，或者是当某一个组件隐藏时，或者某一个动作执行之前或执行完后等，都可以产生事件通知，对这个通知感兴趣的程序(事件监听器)会执行，并作相应的处理。
２、传统DOM事件编程例子
<script>
function a(e){
alert('some thing'+e.getX());
}
</script>
<input type="button" value="alert框" id="btnAlert" onclick="a();">

　　　用代码来定义上面的事件
<script>
function a(e){
alert('some thing'+e.getX());
}
window.onload=function(){
document.getElementById("btnAlert").onclick=a;
}
</script>
<input type="button" value="alert框" id="btnAlert">
　　　传统事件对象：
　　　事件源,事件目标,监听器
　　　IE中的Event处理!

３、Ext对DOM事件的扩展
　　对于Ext这种用于处理用户UI的框架来说，事件的处理及响应就显得更加的重要了，那些ExtJS提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。
　　对于Ext来说，他在传统事件的基础上提供了更多丰富多彩的事件处理机制，我们可以使用他的事件处理机制，通过事件响应及处理，编写出交互性非常灵活的Web应用程序。
　　Ext的事件支持体现在两个方面，首先是对浏览器默认事件进行了进一步的扩展及封装，比如在Event对象的基础上提供了一个EventObject，提供了全局的事件管理器，灵活多变的事件响应方法，比如说在事件发生后几秒才响应事件，或者事件队列等功能。

使用Ext的事件处理机制，前面的事件处理可以变成如下的形式：
<script>
function a(e{
alert('some thing'+e.getX())
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input type="button" value="alert框" id="btnAlert">

　　在调用addListener 方法的代码中，第一个参数表示事件名称，第二个参数表示事件处理器或事件响应函数。ExtJS支持事件队列，可以往对象的某一个事件中添加多个事件响应函数，比如下面的代码：
　　Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});
　　由于调用了两次addListener或on方法，因此当点击按钮的时候会弹出两次信息。
　　当然，ExtJS还支持事件延迟处理或事件处理缓存等功能，比如下面的代码：
　　Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
　　由于在调用addListener的时候传递指定的delay为2000，因此当用户点击按钮的时候，不会马上执行事件响应函数，而是在2000毫秒(也就是两秒)后才会弹出提示信息框。
　　另外，Ext对事件响应还提供了更多其它的特性支持，主要包括下面这些内容：
　　监听器缓冲，可以实现在指定的缓冲时间周期内，事件响应函数只执行一次，代码如下：
el.on('click', this.onClick, this, {buffer: 100});

　　还可以使用options选项来指定事件的响应及处理机制，比如是否阻止事件的进一步传播或响应等。
el.on('click', this.onClick, this, {preventDefault: true});
 // only stop propagation
el.on('click', this.onClick, this, {stopPropagation: true});
 // prevent default and stop propagation
el.on('click', this.onClick, this, {stopEvent: true});
当然，还可以包含其它的选项，比如下面的代码：
el.on('click', this.onClick, this, {
    single: true, // 在事件响应函数触发后自动删除监听器
    delegate: 'li.some-class' //自动事件代理 Automatic event delegation!
});

还可以在options参数中包括自定义的参数信息，比如下面的代码：
function onClick(ev, target, options){
   alert(options.someProperty); // alerts 'someValue'
}
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});

可以一次性给某一个元素添加多个事件响应函数，比如下面的代码给元素添加了click、mouseover及mouseout等事件的事件响应函数。
el.on({
    'click' : {
    fn: this.onClick,
scope: this,
delay: 100
    },
    'mouseover' : {
    fn: this.onMouseOver,
scope: this
    },
    'mouseout' : {
    fn: this.onMouseOut,
        scope: this
    }
});

４、Ext组件的事件
　　Ext的中有一个Ext.util.Observable类，他提供了对象的事件观察监听及消息通知、事件触发等一系列的事件及响应相关功能，而Ext组件的基类Component就是继承自这个类。因此，Ext为其组件提供了非常丰富的事件模型，比如组件生命周期变化、组件某一状态改变等，都提供了特定的事件支持。
　　比如说，所以有的组件都有一个render事件，而这个事件是在组件渲染完以后会触发，这时我们就可以通过监听这个事件来实现在组件渲染后执行特定的操作。看下面的代码：
function showHtml(p){
alert(p.el.dom.innerHTML);
}
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.addListener("render",showHtml);
panel.render("test")
　　那么一旦panel渲染(调用了render方法)以后，就会马上执行showHtml这个方法，并把panel对象作为参数传递给showHtml方法，因此我们可以看到这个panel的HTML代码片段。当然，如果Panel没有渲染，比如我们不调用render方法，则不会执行showHtml中的内容。
　　有一些事件的响应函数会返回特定值，Ext或根据这个响应函数的返回来判断是否执行相应的操作。比如说所有组件都有一个beforehide事件，这个事件是在组件变成隐藏之前触发，如果事件响应函数返回了一个false的值，那么他就会停止执行隐藏组件这个动作。
　　比如说来看下面的代码：
function confirmHide(){
return confirm("是否真要隐藏这个组件");
}
var panel=new Ext.Panel({title:"面板",width:500,height:300});
panel.on("beforehide",confirmHide);
panel.render("test");
panel.hide();
　　那么这个当谳用panel.hide()这个方法时候，他就会隐藏这个组件，但是由于前面注册了一个beforehide事件，因此他就会在隐藏组件之前先调用confirmHide方法，这个方法通过一个confirm函数来让用户选择是否隐藏，如果我们们选择“是“则会返回true,那么这个组件就被隐藏，如果选择“否”则返回false，那么hide方法就会停止执行隐藏的操作。
　　那么一个组件究竟支持哪些事件，这些事件在触发时会给响应函数传递什么样的参数，以及事件响应函数是否会对组件的下一步操作产生影响，这就需要我们通过组件的API中的Events部分来了解具体的信息了。