1.传统事件绑定回顾
1.1第一种
<script type="text/javascript">
function hello(){
alert('hello word');
}
</script>
html 调用
<input type="button" id="btn1" value="第一种事件绑定方式" onClick="hello()">
1.2第二种
if(Ext.isIE){
document.getElementById("btn2").attachEvent("onclick",function(){
alert("第二种事件绑定方式");
});
}else{
document.getElementById("btn2").addEventListener("click",function(){
alert("第二种事件绑定方式");
});
}
2.EXT方法
Ext.get('btn3').on("click",function(){ //get dom 中ID
alert("第三种事件绑定方式");
})
3.自定义 EXT事件 和 事件拦截
要让一个组件具有事件机制,必须先继承Ext.util.Observale
业务逻辑:
一个自定义事件的例子
没有用到事件处理的场景:
母亲问孩子和不饿-->
<-- 孩子
饿了-->给一瓶牛奶
不饿-->不给
事件场景:
母亲给孩子一个瓶牛奶-->
孩子拿到牛奶感觉饿了就喝
感觉不饿就不喝
角色功能分析:
孩子:应该有自己能拿到牛奶判断饿不饿的方法,当母亲给他牛奶的时候调用这个方法.
那么孩子就要有一个业务事件时刻监听这母亲什么时候给自己牛奶
母亲:调用孩子拿牛奶的方法,并且传入一瓶牛奶
(function(){
Ext.onReady(function(){
Ext.define("children",{
extend:'Ext.util.Observable',
constructor:function(){
this.state = "hungry";//目前所属的状态 full
//调用setMilk方法就可以触发hungry事件
this.setMilk = function(milk){
//(3)触发一个事件 调用
this.fireEvent('hungry',milk);
};
//(1)注册一个事件 children对外有这样一个事件 声明
this.addEvents({'hungry':true});
//(2)注册
this.addListener("hungry",function(milk){
if(this.state == 'hungry'){
this.drink(milk);
}else{
alert("我不饿");
}
});
this.drink = function(milk){
alert("我喝掉了一瓶牛奶: "+milk);
};
}
});
/**
* 为对象添加一个事件addEvents-->事件的监听方式注册这个事件addListener-->触发了这个事件的动作fireEvent
*/
var children = Ext.create("children",{});//本对象是牛奶过敏的对象
Ext.util.Observable.capture(children,function(eventName){ //事件拦截
if(eventName == "hungry"){
alert('这个孩子牛奶过敏不能和牛奶...');
return false;
}else{
return true;
}
})
//母亲调用孩子的接受牛奶的方法
children.setMilk("三鹿牛奶");
});
})();
4.addManagedListener 收管制的监听
他是由调用的组建管理的,当组建执行了销毁命令的时候所有被组建管制的事件全部销毁
(function(){
Ext.onReady(function(){
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:'销毁删除按钮',handler:function(){
var c = Ext.getCmp("delete");
if(c){
c.destroy();
}
}}
]
});
var deleteB = Ext.getCmp("delete");
deleteB.addManagedListener(Ext.getCmp("create"),'click',function(){ //将Ext.getCmp("create")
组件的“click”操作,交给deleteB管理。
alert('添加操作');
});
//Ext.getCmp("create").on("click",function(){});
});
})();
5.relayEvents 事件的分发和传播(控制实现事件在不同空间或对象内的传播)
比如说孩子喝完三鹿就去医院呀,老爸就要带着去医院(老爸继续孩子喝牛奶的事件)
//父亲类没有声明过任何监听事件
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",{});
//把children的事件传播给father
father.relayEvents(children,['hungry']);
father.on("hungry",function(){
alert("送喝了三鹿的孩子去医院..");
});
6.事件对象Ext.EventObject
不是一个单例,不能被直接new出来,他会存活早事件处理的函数中
Ext.onReady(function(){
var b = Ext.get("btn4");
b.on("click",function(e){ //e 为事件对象
alert(e.getPageX())
});
})
7.事件管理器Ext.EventManager
更方便的为页面元素绑定事件处理函数
Ext.onReady(function(){
Ext.EventManager.addListener("btn5",'click',function(){
alert("通过事件管理器进行事件的监听注册");
})
})
分享到:
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62...
Extjs 5 学习笔记,在网上下载整理好的。
ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
非常适合新手学习extjs的笔记,让你少走弯路
老师整理的extjs学习笔记,和大家共享
是我学习Extjs 的学习笔记收藏整理,学习extjs的同学可以好好看看,绝对有好处,学到很多知识!
语言程序设计资料:ExtJs学习笔记-2积分.doc
学习ExtJS时看书的笔记,记录了ExtJS事件机制的原理
自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,