63.ExtJs事件（自定义事件、on、eventManager）示例
转自：https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5
ExtJs事件（自定义事件、on、eventManager）示例
鉴于最近更新主页比较慢，先把最近更新的extJs示例发到这里好了。
页面代码：
<body>
<link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<mce:script type="text/javascript" src="../../../../ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../../../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script>
<div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
事件使用例子，包括自定义事件及on、addListener和EventManager的使用。
</div>
<div id="eventTestDiv" style="padding: 10px 10px 10px 20px;width:150px;height:50px;background-color:green;">
鼠标移到我试试！
</div>
<br>
<div style="padding: 10px 10px 10px 20px;" mce_style="padding: 10px 10px 10px 20px;">
<input type="button" name="button1" id="button1" value="点我" />
</div>
<mce:script type="text/javascript" src="CustomEvent.js" mce_src="CustomEvent.js"></mce:script>
</body>
js代码
/****************************************
* 自定义事件使用
*/
var Person = function(){
// 注册事件,该事件名字为：say
this.addEvents("say");
// 另外一种方式注册多个事件
this.addEvents({
"run" : true,
"see": false
});
}
// Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能
Ext.extend(Person,Ext.util.Observable); // 定义相关执行的方法
var speak = function(){
alert("I can speak!");
}
var run = function(){
alert("I can run!");
}
var see = function(){
alert("I can see the word!");
} var person = new Person();
// 将方法say绑定到事件say上。二者名字可以不一样
person.on("say", speak);
person.on("run", run);
person.on("see", see); // 触发事件，这里只触发了say和run。see事件没有触发就不会发生
person.fireEvent("say");
person.fireEvent("run");
/*****************************************/ Ext.onReady(function() {
// 返回的Element对象,不等价于document.getElementById(id)
// Ext.getDom(id)才等价于document.getElementById(id)
var eventTestDiv = Ext.get("eventTestDiv");
// 通过EventManager来实现，也可以通过obj.addListener实现，见下面的例子
Ext.EventManager.addListener(eventTestDiv,"mouseover",function(){
Ext.Msg.alert('信息', 'Id：' + this.id + '<br>内容：' + this.innerHTML);
});
Ext.EventManager.addListener(eventTestDiv,"click",function(){
Ext.Msg.alert('信息', 'Id：' + this.id
+ '<br>name：' + this.name
+ '<br>value：' + this.value);
});
/**
使用addListener的例子，第三个参数是指作用域，第四个参数是个配置选项
有4个配置选项:
delay{Number}： 触发事件后处理函数延时执行的时间。(触发事件多久后执行指定的函数)；
scope{Object}： 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。(如果第3个参数设置了,此处可以省)；
single{Boolean}： true代表为事件触发后加入一个下次移除本身的处理函数。(事件触发一次后，就被移走，以后再触发该事件无效)；
buffer{Number}: 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。
以下的配置未用过：
delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。
stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。
preventDefault {Boolean} : true表示为阻止默认动作。
stopPropagation {Boolean} : true表示为阻止事件传播。
normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。
*/
var button1 = Ext.get("button1");
// addListener等价于on，on只是addListener的简写
button1.addListener("click",function(){
// 获得实际传递参数值，前两个参数是EventObject和Element，第三个是option选项对象
var msg = '<br/>获取选填参数信息：<br/>选填参数个数：' + arguments.length + "<br/>";
for(var i in arguments[2]) {
msg += i + "：" + arguments[2][i] + "<br/>";
}
Ext.Msg.alert('信息', '打印eventTestDiv的信息：<br/><br/>Id：' + this.id
+ "<br/>" + msg
);
},eventTestDiv, {
// 事件延迟触发事件
delay : 500,
// 是否只触发一次
single: false,
msg : '我是追加的参数'
});
/**
事件的几种写法（addListener和on是等价的）：
var fn = function (){
// 这里添加需要处理的逻辑
};
// 第一种写法
button1.addListener("click",fn,button1);
button1.addListener("mouseover",fn,button1); //第二种写法
button1.on({
click : fn,
mouseover : fn,
scope : button1
}); //第三种写法
button1.on({
click : {scope:button1, delay:3000, fn:fn},
mouseover : {scope:button1, delay:1000, fn:fn}
});
*/
})
63.ExtJs事件（自定义事件、on、eventManager）示例的更多相关文章
- 如何给ActiveX控件添加“事件”“属性”“标准事件”“自定义事件”等一些相关操作
上一篇小编带大家熟悉了一下ActiveX的建立以及相关的概念,(http://blog.csdn.net/u014028070/article/details/38424611) 本文介绍下如何给控件 ...
- Extjs中自定义事件
//Ext中所谓的响应事件,响应的主要是组件中已经定义的事件(通过看api各组件的events可以找到) //主要作用就是利用on调用各组件的事件处理函数,然后在函数中作用户想要的操作 ...
- 主动触发事件 自定义事件 trigger 及其用法
1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...
- C#事件-自定义事件的使用方法（转载）
1.声明一个委托类 public delegate SomethingChangedHandler(object sender,EventArgs e); 2.在你的类中声明一个事件绑定到该委托 pu ...
- Java的事件自定义事件学习
课程设计要做一个游戏,由于对C++不是很熟悉,老师也准许使用java 或者其他的语言,在.net我学过事件,一种委托回调,但是在java 我不是很了解,应该原理都相同吧! 游戏大致是这样的,现在这在写 ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- Spring Boot（六）自定义事件及监听
事件及监听并不是SpringBoot的新功能,Spring框架早已提供了完善的事件监听机制,在Spring框架中实现事件监听的流程如下: 自定义事件,继承org.springframework.con ...
- js原生创建模拟事件和自定义事件的方法
让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保 ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- 【教程】【FLEX】#003 自定义事件、模块间通讯
本篇笔记,主要阐明 事件是如何创建 和 如何使用自定义事件达到模块之间通讯 的效果. 句子解释: 什么叫做模块之间的通讯呢?? 简单点说,就是两个模块之间可以互相传数据. A模块 可以接收到 B模块的 ...
随机推荐
- 数据库——DBUtils和连接池
第一章 DBUtils如果只使用JDBC进行开发,我们会发现冗余代码过多,为了简化JDBC开发,本案例我们讲采用apache commons组件一个成员:DBUtils.DBUtils就是JDBC的简 ...
- 浅谈java浅拷贝和深拷贝
前言:深拷贝和浅拷贝的区别是什么? 浅拷贝:被复制的对象的所有变量都含有原来对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之, 浅拷贝仅仅复制所考虑的对象,而不复制它所引用的对象.深拷 ...
- 每日命令：（1）ls
ls命令是linux下最常用的命令.ls命令就是list的缩写缺省下ls用来打印出当前目录的清单如果ls指定其他目录那么就会显示指定目录里的文件及文件夹清单. 通过ls 命令不仅可以查看linu ...
- pageContext对象的使用及常用方法
pageContext对象的使用及常用方法 制作人:全心全意 获取页面上下文的pageContext对象是一个比较特殊的对象,通过它可以获取JSP页面的request.response.session ...
- [luoguP2875] [USACO07FEB]牛的词汇The Cow Lexicon（DP）
传送门 f[i] 表示前 i 个字符去掉多少个 的最优解 直接暴力DP ——代码 #include <cstdio> #include <cstring> #include & ...
- noip模拟赛 罪犯分组
分析:看了题后没别的思路,感觉就是dp,普通dp的话状态和方程实在是不好设计,观察数据,发现N非常小,暗示了这道题要用状压dp来做. 先枚举每个集合,再用O(n^2)的暴力看这个集合内有多少个冲突,如 ...
- 质因数分解 2012年NOIP全国联赛普及组
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题目描述 Description 已知正整数 n是两个不同的质数的乘积,试求出较大的那个质数 . 输入描述 Inp ...
- md5加密的工具类（from 韩顺平）
输入一个字符串,然后可以进行md5加密 import java.security.*; import java.security.spec.*; public class MyTools { publ ...
- BZOJ1452 count （树状数组）
一道比较水的二维树状数组,开100个即可,只有100种颜色还是比较EZ的. Program BZOJ1452; ; maxc=; ..maxn,..maxn,..maxc] of longint; f ...
- 测试出来了第一版代码--可以得到用户token啦
一版一版往前走啦... 先安装vs2010的学习版, 然后用codeblock来搞. 有一个msvcr100.dll这个文件需要和代码同级目录. 这样的好处是合规,然后,codeblock也可以用vs ...