Extjs4.0的事件机制
Extjs的事件机制
1． 事件的三种绑定方式
HTML/DHTML
DOM
EXTJS
事件绑定机制的总结地址：
http://www.uspcat.com/forum.php?mod=viewthread&tid=203&extra=page%3D1
第一种 在HTML中的原始的js脚本
<script type="text/javascript">
function hello(){
alert("第一种事件绑定机制");
}
</script>
<input type="button" id="btn1" value="第一种事件绑定机制" onclick="hello()"/><br/>
第二种：在DOM下的事件机制
<input type="button" id="btn2" value="第二种事件绑定机制"/><br/>
(function(){
Ext.onReady(function(){
//DOM事件的两种机制
if(Ext.isIE){
//适合在IE下运行的机制
document.getElementById("btn2").attachEvent("onclick",function(){
alert("第二种");
});
}else{
//适合于火狐浏览器下运行的
document.getElementById("btn2").addEventListener("click",function(){
alert("第二种");
});
}
});
})();
注：在IE浏览器下运行的是attachEvent，在火狐浏览器下运行的是addEventListener，DOM不能跨浏览器运行
第三种 在extjs下的事件机制
(function(){
Ext.onReady(function(){
//extjs的事件机制，是跨浏览器的
Ext.get("btn3").on("click",function(){
alert("333");
});
});
})();
Extjs的事件机制在哪个浏览器下都可以使用
2． Ext.util.Observable 事件的基类
它是为所有支持事件机制的extjs组件提供事件的支持
如果我们自己创建新的组件要是有事件的支持，那么我们就继承它
事件的分类：
标准事件[键盘按钮按下，鼠标的单击事件，滑过滑动]
业务事件[当面板收起的时候触发的事件，当组件被销毁的时候触发，当每一个对象的属性值不为空的时候触发]
一个自定义的例子：
没有用到事件处理的场景
母亲问孩子饿不饿—--->
---à孩子
饿了 ---à给一瓶牛奶
不饿---à不给
用了事件的场景
母亲给孩子一瓶牛奶----à
孩子拿到牛奶感觉饿了就喝
感觉不饿就不喝
角色功能分析
孩子：应该有自己能拿到牛奶判断自己饿不饿的方法，当母亲给他牛奶的时候调用这个方法
那么孩子就要有一个业务事件时刻监听着母亲什么时候给奶喝
母亲：调用孩子拿牛奶的方法，并且传入一瓶牛奶
例子为：
(function(){
Ext.onReady(function(){
//举例讲解时间的基类 Ext.util.Obervable
//孩子类
Ext.define("children",{
extend:'Ext.util.Observable',
//构造函数
constructor:function(){
this.state = "hungry",//目前所属的状态
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",{});
//母亲调用孩子的接受牛奶的方法
children.setMilk("爽歪歪");
});
/**
* 事件的步骤：
* (1)为对象添加一个事件 this.addEvents
* (2)事件的监听方式注册这个事件 this.addListener
* (3)触发了这个事件的动作 this.fireEvent
*/
})();
3． addManageListener 受管制的事件监听
它是由调用的组件创建管理的，当组件执行了销毁的命令的时候所有的被管制的组件都被销毁
(function(){
Ext.onReady(function(){
//来介绍事件中addManageListener的作用，是用来管理其他组件的
//我们用到一个工具类来举例
var tbar = Ext.create("Ext.toolbar.Toolbar",{
renderTo : Ext.getBody(),//意思是让组件依附于哪里
width:500,
//存放组件的数组
items:[
{xtype: 'button',id:'create', text : 'create' },
{xtype:'button',id:'delete', text:'delete'},
{xtype:'button',text:'destory',handler:function(){
var c = Ext.getCmp("delete");//
if(c){
c.destroy();
}
}
}
]
});
var deleteB = Ext.getCmp("delete");
deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){
alert("添加操作");
});
//deleteB.addManagedListener的意思是( 管理的是谁，管理的事件是什么事件，当执行管理的事件时的操作)，就相当于是
//Ext.getcmp("create").on("click",function(){});
//Ext.getCmp("delete");方法获取的是id
});
})();
4.relayEvents事件的分发和传播（控制实现事件在不同空间或对象内传播）
var children = Ext.create("children",{});
//父类没有声明过任何监听事件
Ext.define("father",{
extend:'Ext.util.Observable',
constructor:function(config){
this.listeners = config.listeners;
this.superchlass.constructor.call(this,config);
}
});
var father = Ext.create("father",{});
father.relayEvents(children,['hungry']);//事件的分发和传播
father.on('hungry',function(){
alert("送医院")
});
5．事件对象 Ext.EventObject
Ext.onReady(function(){
//eventObject传统的事件
var b = Ext.get("btn4").on("click",function(e){
alert(e.getPageX());
});
});
6.事件管理器 Ext.EventManager
它可以更方便的为页面元素绑定事件处理函数
Ext.onReady(function(){
//通过事件管理器注册监听
Ext.EventManager.addListener("btn5",'click',function(){
alert("adfsf");
})
});