2012/7/25Extjs学习随笔

Extjs提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监控控件状态变化，更新控件视图信息，与服务器进行交互等等。事件同意由Ext.EventManager对象来管理，与浏览器W3C标准事件对象Event对应，Ext封装了一个Ext.EventObject事件对象。支持事件处理的类（或接口）为Ext.util.Observable,凡是继承该类的组件或类都支持往对象中添加事件处理及相应功能。

首先我们来看看标准html中的事件处理，看下面的html代码：

<script>

function a(){

　　alert("u clicked me");

}

</script>

<input id="btn" type="button" onclick="a();" value="alert框"/>

点击这个按钮则会触发onclick事件，然后会执行函数a（）中的代码。再简单修改一下上面的代码：

<script>

function a(){

　　alert("u clicked me");

}

 

window.onload=functon(){

document.getElementById("btn").onclick=a;

}

</script>

<input id="btn" type="button" onclick="a();" value="alert框"/>

 

上面的代码在文档加载的时候就直接对btn的onclick赋值，非常清晰的指明了按钮btn的事件响应函数为a,注意，这里的a后面没有().

Extjs中组件的事件处理跟上面的相似，看下代码：

 <script>
   　function a(){
   alert('u clicked me');
   }
   Ext.onReady(function(){
   Ext.get("btn").addListener("click",a);
   });
   </script>
   <input id="btn" type="button" value="alert框">

Ext.get("btn")得到一个与页面中按钮btn关联的Ext.Element对象，可以直接调用该对象上的addListener方法来给对象添加监听事件。在调用addListener方法中，第一个参数表示事件名称，第二个参数表示事件处理器或整个响应函数。