ExtJs中的事件机制

1.事件的3中绑定方式

       HTML/DHTML

       DOM

       EXTJS

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

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

2) DOM

 Ext.onReady(function(){
//判断是否是IE浏览器
    if(Ext.isIE){
    document.getElementById("btn2").attachEvent("onclick",function(){
              alert("IE");
           });
       }else{
    document.getElementById("btn2").addEventListener("click",function(){
           alert("Firefox");
           });   
       }
    });

3)ExtJs

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

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

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

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

       事件的分类

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

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

       一个自定义事件的例子      

              没有用到事件处理的场景

              母亲问孩子和不饿-->

                             <-- 孩子

                                   饿了-->给一瓶牛奶

                                   不饿-->不给

              用了事件的场景

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

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

                                          感觉不饿就不喝

             

              角色功能分析:

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

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

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

/***

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

        */

Js代码：

Ext.onReady(function(){
  Ext.define("children",{
    extend:"Ext.util.Observable",  //Ext.util.Observable为事件的基类
    constructor:function(){      //构造函数
      this.state="hungry",
      //this.state="full",    //初始化小孩的状态
      //定义触发事件的函数setmilk
      this.setmilk=function(milk){
        this.fireEvent("getmilk",milk);   //fireEvent()是触发这个事件
      },
      //添加了getmilk事件
      this.addEvents({"getmilk":true}),
      //注册getmilk事件具体的处理机制
      this.addListener("getmilk",function(milk){
        //判断孩子现在是否饿了
        if(this.state=="hungry")
        {
            this.deal(milk);
        }
        else{
           alert("现在不想喝牛奶");
        }
      }),
      //定义一个函数用来调用
      this.deal=function(milk){
         alert("喝了一瓶："+milk);
      };
    }
  });
  //创建一个孩子对象
  var children=Ext.create("children",{});
  //调用孩子的获得牛奶的方法
  children.setmilk("伊利纯牛奶");
});

页面显示结果：

3.addManagedListener 收管制的监听

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

Ext.onReady(function(){
        //创建了一条工具条
       var tbar = Ext.create('Ext.toolbar.Toolbar',{
           renderTo:Ext.getBody(),
           width:500,
           items:[
     //工具条有三个按钮，create按钮，delete按钮，销毁删除按钮
              {xtype:'button',id:'create',text:'create'},
              {xtype:'button',id:'delete',text:'delete'},
              {xtype:'button',text:'销毁删除按钮',handler:function(){
             //单击“销毁删除按钮”后，delete按钮就会消失了
                  var c = Ext.getCmp("delete");  //通过id获取ExtJs组件
                  if(c){
                     c.destroy();  //销毁
                  }
              }}        
           ]
       });
       var deleteB = Ext.getCmp("delete");
       //添加操作的效果其实是create按钮的操作，但是是通过delete来管理的，如果delete按钮不存在了，create的添加操作就失效了
       deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){
           alert('添加操作');
       });
       //Ext.getCmp("create").on("click",function(){});
});

4.relayEvents 事件的分发和传播

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

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

 Ext.onReady(function(){
       Ext.define("children",{
           extend:'Ext.util.Observable',
           constructor:function(){
              this.state = "hungry",//目前所属的状态 full
              this.setMilk = function(milk){
                  this.fireEvent('hungry',milk);
              },
              this.addEvents({'hungry':true}),
              this.addListener("hungry",function(milk){
                  if(this.state == 'hungry'){
                     this.drink(milk);
                  }else{
                     alert("我不饿");            
                  }
              }),
              this.drink = function(milk){
                  alert("我喝掉了一瓶牛奶: "+milk);
              }
           }
       });
       var children =Ext.create("children",{});
       //父亲类没有声明过任何监听事件
       Ext.define("father",{
           extend:'Ext.util.Observable',
           constructor:function(config){
              this.listeners =config.listeners;
              this.superclass.constructor.call(this,config);
           }
       });
       var father =Ext.create("father",{});
       father.relayEvents(children,['hungry']);
       father.on("hungry",function(){
           alert("送喝了三鹿的孩子去医院..");
       });
       //调用孩子的接受牛奶的方法
       children.setMilk("三鹿牛奶");
      
    });

5.事件对象Ext.EventObject

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

Ext.onReady(function(){
  var b = Ext.get("btn4");
  b.on("click",function(e){
     alert(e);
  });
});

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

6.事件管理器Ext.EventManager

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

       方法:addListener 为元素增加事件

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