ExtJs中的事件机制

ExtJs中的事件机制

标签： extjsExtJS

2012-11-11 14:42  3713人阅读  评论(0)  收藏  举报

  分类：

ExtJs（7） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

1.事件的3中绑定方式

       HTML/DHTML

       DOM

       EXTJS

1) HTML/DHTML 这也是最传统的js绑定事件

[javascript]  view plain  copy

1. <script type="text/javascript">  
2. function hello(){  
3.     alert('hello word');  
4. }  
5. </script>  
6. <input type="button" id="btn1" value="点击" onClick="hello()"><br>  

2) DOM

[javascript]  view plain  copy

1. Ext.onReady(function(){  
2. /判断是否是IE浏览器  
3.    if(Ext.isIE){  
4.    document.getElementById("btn2").attachEvent("onclick",function(){  
5.              alert("IE");  
6.           });  
7.       }else{  
8.    document.getElementById("btn2").addEventListener("click",function(){  
9.           alert("Firefox");  
10.           });     
11.       }  
12.    });  

3)ExtJs

[javascript]  view plain  copy

1. Ext.onReady(function(){  
2.     //这种绑定事件和浏览器无关  
3.     Ext.get('btn3').on("click",function(){  
4.           alert("第三种事件绑定方式");  
5.       })  
6.    });  

2.Ext.util.Observable 事件的基类

       他为所有支持事件机制的extjs组建提供事件的支持

       如果我们自己创建新的组建需要有时间的支持那么我们就继承他

       事件的分类

              标准事件[键盘按钮按下,鼠标的单击双击,滑过滑动]

              业务事件[当面板收起的时候触发,当组建被销毁的时候触发,当每一个对象的属数值不为空的时候触发]

       一个自定义事件的例子      

              没有用到事件处理的场景

              母亲问孩子和不饿-->

                             <-- 孩子

                                   饿了-->给一瓶牛奶

                                   不饿-->不给

              用了事件的场景

              母亲给孩子一个瓶牛奶-->

                                          孩子拿到牛奶感觉饿了就喝

                                          感觉不饿就不喝

             

              角色功能分析:

                     孩子:应该有自己能拿到牛奶判断饿不饿的方法,当母亲给他牛奶的时候调用这个方法.

                     那么孩子就要有一个业务事件时刻监听这母亲什么时候给自己牛奶

                     母亲:调用孩子拿牛奶的方法,并且传入一瓶牛奶    

/***

        * 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发了这个事件的动作fireEvent

        */

Js代码：

[javascript]  view plain  copy

1. Ext.onReady(function(){  
2.   Ext.define("children",{  
3.     extend:"Ext.util.Observable",  //Ext.util.Observable为事件的基类  
4.     constructor:function(){      //构造函数  
5.       this.state="hungry",  
6.       //this.state="full",    //初始化小孩的状态  
7.       //定义触发事件的函数setmilk  
8.       this.setmilk=function(milk){  
9.         this.fireEvent("getmilk",milk);   //fireEvent()是触发这个事件  
10.       },  
11.       //添加了getmilk事件  
12.       this.addEvents({"getmilk":true}),  
13.       //注册getmilk事件具体的处理机制  
14.       this.addListener("getmilk",function(milk){  
15.         //判断孩子现在是否饿了  
16.         if(this.state=="hungry")  
17.         {  
18.             this.deal(milk);  
19.         }  
20.         else{  
21.            alert("现在不想喝牛奶");  
22.         }  
23.       }),  
24.       //定义一个函数用来调用  
25.       this.deal=function(milk){  
26.          alert("喝了一瓶："+milk);  
27.       };  
28.     }  
29.   });  
30.   //创建一个孩子对象  
31.   var children=Ext.create("children",{});  
32.   //调用孩子的获得牛奶的方法  
33.   children.setmilk("伊利纯牛奶");  
34. });  

页面显示结果：

3.addManagedListener 收管制的监听

       他是由调用的组建管理的,当组建执行了销毁命令的时候所有被组建管制的事件全部销毁

[javascript]  view plain  copy

1. Ext.onReady(function(){  
2.         //创建了一条工具条  
3.        var tbar = Ext.create('Ext.toolbar.Toolbar',{  
4.            renderTo:Ext.getBody(),  
5.            width:500,  
6.            items:[  
7.      //工具条有三个按钮，create按钮，delete按钮，销毁删除按钮  
8.               {xtype:'button',id:'create',text:'create'},  
9.               {xtype:'button',id:'delete',text:'delete'},  
10.               {xtype:'button',text:'销毁删除按钮',handler:function(){  
11.              //单击“销毁删除按钮”后，delete按钮就会消失了  
12.                   var c = Ext.getCmp("delete");  //通过id获取ExtJs组件  
13.                   if(c){  
14.                      c.destroy();  //销毁  
15.                   }  
16.               }}          
17.            ]  
18.        });  
19.        var deleteB = Ext.getCmp("delete");  
20.        //添加操作的效果其实是create按钮的操作，但是是通过delete来管理的，如果delete按钮不存在了，create的添加操作就失效了  
21.        deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){  
22.            alert('添加操作');  
23.        });  
24.        //Ext.getCmp("create").on("click",function(){});  
25. });  

4.relayEvents 事件的分发和传播

(控制实现事件在不同空间或对象内的传播)

       比如说孩子喝完三鹿就去医院呀,老爸就要带着去医院

[javascript]  view plain  copy

1. Ext.onReady(function(){  
2.       Ext.define("children",{  
3.           extend:'Ext.util.Observable',  
4.           constructor:function(){  
5.              this.state = "hungry",//目前所属的状态 full  
6.              this.setMilk = function(milk){  
7.                  this.fireEvent('hungry',milk);  
8.              },  
9.              this.addEvents({'hungry':true}),  
10.              this.addListener("hungry",function(milk){  
11.                  if(this.state == 'hungry'){  
12.                     this.drink(milk);  
13.                  }else{  
14.                     alert("我不饿");              
15.                  }  
16.              }),  
17.              this.drink = function(milk){  
18.                  alert("我喝掉了一瓶牛奶: "+milk);  
19.              }  
20.           }  
21.       });  
22.       var children =Ext.create("children",{});  
23.       //父亲类没有声明过任何监听事件  
24.       Ext.define("father",{  
25.           extend:'Ext.util.Observable',  
26.           constructor:function(config){  
27.              this.listeners =config.listeners;  
28.              this.superclass.constructor.call(this,config);  
29.           }  
30.       });  
31.       var father =Ext.create("father",{});  
32.       father.relayEvents(children,['hungry']);  
33.       father.on("hungry",function(){  
34.           alert("送喝了三鹿的孩子去医院..");  
35.       });  
36.       //调用孩子的接受牛奶的方法  
37.       children.setMilk("三鹿牛奶");  
38.        
39.    });  

5.事件对象Ext.EventObject

       不是一个单例,不能被直接new出来,他会存活早事件处理的函数中

[javascript]  view plain  copy

1. Ext.onReady(function(){  
2.   var b = Ext.get("btn4");  
3.   b.on("click",function(e){  
4.      alert(e);  
5.   });  
6. });  

使用火狐浏览器调试了e对象中封装的信息：

6.事件管理器Ext.EventManager

       他可以更方便的为页面元素绑定事件处理函数

       方法:addListener 为元素增加事件

[javascript]  view plain  copy

1. Ext.onReady(function(){  
2.     Ext.EventManager.addListener("btn5",'click',function(){  
3.        alert("通过事件管理器进行事件的监听注册");  
4.     })  
5. });