〖ExtJS〗之事件处理实例

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://rhyme.blog.51cto.com/328158/81341
ExtJS提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监控控件状 态变化、更新控件视图信息、与服务器进行交互等等。事件统一由Ext.EventManager对象管理，与浏览器W3C标准事件对象Event相对 应，Ext封装了一个Ext.EventObject事件对象。支持事件处理的类(或接口)为Ext.util.Observable，凡是继承该类的组 件或类都支持往对象中添加事件处理及响应功能。
标准html中的事件处理就不用我多说了吧，这个很简单！

下面看看在ExtJS中怎么实现的：

<script> 
function a(){ 
  alert('some thing'); 
} 
  Ext.onReady(function(){ 
    Ext.get("btnAlert").addListener("click",a);   
}); 
</script>

<input id="btnAlert" type="button" value="alert框" />
Ext.get("btnAlert")得到一个与页面中按钮btnAlert关联的Ext.Element对象，可以直接调用该对象上的 addListener方法来给对象添加事件


ExtJS支持事件队列，可以往对象的某一个事件中添加多个事件响应函数，看下面的代码：

Ext.onReady(function(){  
  Ext.get("btnAlert").on("click",a); 
  Ext.get("btnAlert").on("click",a);  
});

ExtJS还支持事件延迟处理或事件处理缓存等功能

Ext.onReady(function(){  
    Ext.get("btnAlert").on("click",a,this,{delay:2000});  
});

对于所有的组件Component，都包含一个beforedestroy事件，该事件会在Ext销毁这个组件的时候触发：

Ext.onReady(function(){  
    var win=new Ext.Window({         
               title:"不能关闭的窗口",          
               height:200,          
               width:300  
               });  
        win.on("beforedestroy",function(obj){   
          alert("想关闭我，这是不可能的!");   obj.show();   
          return false;  
        });  
       win.show();
}); 

下面也是一样的效果：

Ext.onReady(function(){  
          var win=new Ext.Window({   
                            title:"不能关闭的窗口",    
                            height:200,    
                            width:300,   
                            listeners:{"beforedestroy":function(obj){  
                                                    alert("想关闭我，这是不可能的!"); 
                                                    obj.show();  
                                                    return false;    
                                                    }} 
                             });  
           win.show();
}); 

本文出自 “零度空間” 博客，请务必保留此出处http://rhyme.blog.51cto.com/328158/81341