`

extjs4 事件处理

 
阅读更多

引自：http://www.cnblogs.com/luluping/archive/2011/11/09/2243768.html

一、addListener方法

Javascript代码 复制代码 收藏代码
  1. var button = Ext.get('btn');   
  2. button.addListener('click',hello1);//绑定事件处理函数   
  3. button.addListener('click',hello2);   
var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);



二、ExtJS支持的自定义事件

Javascript代码 复制代码 收藏代码
  1. //创建Person类   
  2. var Person = Ext.extend(Ext.util.Observable,{   
  3.     constructor : function(name){   
  4.        this.name = name;   
  5.        this.sayNum = 0;   
  6.        this.say = function(){   
  7.             if(this.sayNum < 2){   
  8.                 this.sayNum += 1;   
  9.                 alert('I am '+name);   
  10.             }else{   
  11.                 this.sayNum = 0;//触发自定义事件后计数器归零   
  12.                 this.fireEvent('onSay',this);//激发自定义事件   
  13.             }   
  14.        }   
  15.        this.addEvents({//加入自定义事件   
  16.           "onSay" : true  
  17.        });   
  18.     }   
  19. });   
  20. var per = new Person('tom',3);//创建对象   
  21. //为自定义事件绑定处理函数   
  22. per.addListener('onSay',function handler(){   
  23.     alert('发生了自定义事件');   
  24. });  
//创建Person类
var Person = Ext.extend(Ext.util.Observable,{
	constructor : function(name){
	   this.name = name;
	   this.sayNum = 0;
	   this.say = function(){
			if(this.sayNum < 2){
				this.sayNum += 1;
				alert('I am '+name);
			}else{
				this.sayNum = 0;//触发自定义事件后计数器归零
				this.fireEvent('onSay',this);//激发自定义事件
			}
	   }
	   this.addEvents({//加入自定义事件
		  "onSay" : true
	   });
	}
});
var per = new Person('tom',3);//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
	alert('发生了自定义事件');
});
Html代码 复制代码 收藏代码
  1. <input type='button' value='say' onclick='per.say()'>  
<input type='button' value='say' onclick='per.say()'>


自定义事件的另外一个例子：

Javascript代码 复制代码 收藏代码
  1. //继承自Ext.util.Observable   
  2. var Person = Ext.extend(Ext.util.Observable,{   
  3.     constructor : function(name){   
  4.        this.name = name;   
  5.        this.say = function(){   
  6.             this.fireEvent('onSay',this.name);//激发自定义事件   
  7.        }   
  8.        this.addEvents({//加入自定义事件   
  9.           "onSay" : true  
  10.        });   
  11.     }   
  12. });   
  13. var per = new Person('tom');//创建对象   
  14.   
  15. //为自定义事件绑定处理函数   
  16. per.addListener('onSay',function(name){   
  17.     alert("I'am " + name);   
  18. });  
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
	constructor : function(name){
	   this.name = name;
	   this.say = function(){
			this.fireEvent('onSay',this.name);//激发自定义事件
	   }
	   this.addEvents({//加入自定义事件
		  "onSay" : true
	   });
	}
});
var per = new Person('tom');//创建对象

//为自定义事件绑定处理函数
per.addListener('onSay',function(name){
	alert("I'am " + name);
});


拦截器使用示例Observable.capture，与上面例子不同的地方是“var per = new Person('tom');//创建对象”代码之后的内容替换为：

Javascript代码 复制代码 收藏代码
  1. per.addListener('onSay',handler);//为自定义事件绑定处理函数   
  2. function handler(){//事件处理函数   
  3.     alert('发生了自定义事件');   
  4. }   
  5. //为per对象添加拦截器   
  6. Ext.util.Observable.capture(per,captureFunction);   
  7. //拦截函数   
  8. function captureFunction(eventName){   
  9.     if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行   
  10.         alert("拦截事件：“"+eventName+"”。");   
  11.         return false;   
  12.     }   
  13.     return true;   
  14. }  
per.addListener('onSay',handler);//为自定义事件绑定处理函数
function handler(){//事件处理函数
	alert('发生了自定义事件');
}
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
	if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
		alert("拦截事件：“"+eventName+"”。");
		return false;
	}
	return true;
}



三、addManagedListener受管事件监听器：

Javascript代码 复制代码 收藏代码
  1. function createFn(){   
  2.     alert('新建');   
  3. }   
  4. function openFn(){   
  5.     alert('打开');   
  6. }   
  7. function saveFn(){   
  8.     alert('保存');   
  9. }   
  10. Ext.create('Ext.toolbar.Toolbar',{//创建工具栏   
  11.     renderTo: Ext.getBody(),   
  12.     bodyPadding: 5,   
  13.     width:300,   
  14.     items : [   
  15.         {text:'新建',id:'createBtn',iconCls:'newIcon'},   
  16.         {text:'打开',id:'openBtn',iconCls:'openIcon'},   
  17.         {text:'保存',id:'saveBtn',iconCls:'saveIcon'},   
  18.         {text:'销毁新建按钮',handler : function(){   
  19.             //销毁新建按钮   
  20.             Ext.getCmp('createBtn').destroy();   
  21.         }}   
  22.     ]   
  23. });   
  24. var createBtn = Ext.getCmp('createBtn');   
  25. createBtn.on('click',createFn);   
  26. //以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁   
  27. //了则事件绑定同时解除。   
  28. createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);   
  29. createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);   
function createFn(){
	alert('新建');
}
function openFn(){
	alert('打开');
}
function saveFn(){
	alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
	renderTo: Ext.getBody(),
	bodyPadding: 5,
	width:300,
	items : [
	    {text:'新建',id:'createBtn',iconCls:'newIcon'},
		{text:'打开',id:'openBtn',iconCls:'openIcon'},
		{text:'保存',id:'saveBtn',iconCls:'saveIcon'},
		{text:'销毁新建按钮',handler : function(){
			//销毁新建按钮
			Ext.getCmp('createBtn').destroy();
		}}
	]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
//了则事件绑定同时解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);



四、relayEvents传播分发事件：

Javascript代码 复制代码 收藏代码
  1. //创建Employee工人类   
  2. var Employee = Ext.extend(Ext.util.Observable,{   
  3.     constructor : function(config){   
  4.        this.name = config.name;   
  5.        this.eat = function(){   
  6.             this.fireEvent('startEat',this);//激发开始吃饭事件   
  7.             this.fireEvent('finishEat',this);//激发结束吃饭事件   
  8.        }   
  9.        this.addEvents({//加入自定义事件   
  10.           "startEat" : true,//开始吃饭事件   
  11.           "finishEat" : true//结束吃饭事件   
  12.        });   
  13.        Employee.superclass.constructor.call(this, config)   
  14.     }   
  15. });   
  16.   
  17. //定义Waiter服务员类   
  18. var Waiter = Ext.extend(Ext.util.Observable,{   
  19.     constructor : function(config){   
  20.         Waiter.superclass.constructor.call(this, config);   
  21.     }   
  22. });   
  23. //创建员工对象   
  24. var emp = new Employee({name:'tom'});   
  25. //为自定义事件绑定处理函数   
  26. emp.addListener('startEat',function(){   
  27.     alert(this.name + '开始吃饭了。');   
  28. });   
  29. emp.addListener('finishEat',function (){   
  30.     alert(this.name + '吃完饭，可以收拾盘子了。');   
  31. });   
  32. //创建服务员对象   
  33. var waiter = new Waiter();   
  34. //使服务员对象与员工对象的finishEat事件进行关联   
  35. //也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，   
  36. //然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。   
  37. waiter.relayEvents(emp, ['finishEat']);   
  38. waiter.on('finishEat',function(){   
  39.     alert('服务员开始收拾盘子。');   
  40. });  
//创建Employee工人类
var Employee = Ext.extend(Ext.util.Observable,{
	constructor : function(config){
	   this.name = config.name;
	   this.eat = function(){
			this.fireEvent('startEat',this);//激发开始吃饭事件
			this.fireEvent('finishEat',this);//激发结束吃饭事件
	   }
	   this.addEvents({//加入自定义事件
		  "startEat" : true,//开始吃饭事件
		  "finishEat" : true//结束吃饭事件
	   });
	   Employee.superclass.constructor.call(this, config)
	}
});

//定义Waiter服务员类
var Waiter = Ext.extend(Ext.util.Observable,{
	constructor : function(config){
		Waiter.superclass.constructor.call(this, config);
	}
});
//创建员工对象
var emp = new Employee({name:'tom'});
//为自定义事件绑定处理函数
emp.addListener('startEat',function(){
	alert(this.name + '开始吃饭了。');
});
emp.addListener('finishEat',function (){
	alert(this.name + '吃完饭，可以收拾盘子了。');
});
//创建服务员对象
var waiter = new Waiter();
//使服务员对象与员工对象的finishEat事件进行关联
//也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，
//然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。
waiter.relayEvents(emp, ['finishEat']);
waiter.on('finishEat',function(){
	alert('服务员开始收拾盘子。');
});
Html代码 复制代码 收藏代码
  1. <input type='button' value='员工吃饭' onclick='emp.eat()'>  
<input type='button' value='员工吃饭' onclick='emp.eat()'>



五、Ext.EventObject示例

Javascript代码 复制代码 收藏代码
  1. var btn = Ext.get('buttonTest');   
  2. btn.addListener('click',handler);//为click事件绑定处理函数   
  3. function handler(e){//事件处理函数   
  4.     //获取事件发生时的x坐标   
  5.     var x = e.getPageX();   
  6.     //获取事件发生时的y坐标   
  7.     var y = e.getPageY();   
  8.     var msg = '事件发生坐标 : x='+x+' y='+y;   
  9.     alert(Ext.EventManager.getPageXY(e));   
  10.     alert(msg);   
  11. }  
var btn = Ext.get('buttonTest');
btn.addListener('click',handler);//为click事件绑定处理函数
function handler(e){//事件处理函数
	//获取事件发生时的x坐标
	var x = e.getPageX();
	//获取事件发生时的y坐标
	var y = e.getPageY();
	var msg = '事件发生坐标 : x='+x+' y='+y;
	alert(Ext.EventManager.getPageXY(e));
	alert(msg);
}



六、Ext.EventManager使用

Javascript代码 复制代码 收藏代码
  1. Ext.EventManager.addListener('btn','click',handler);//绑定处理函数 
分享到：
| Ext 的 addEvents方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs4+jbpm4+SSH+oracle.zip

    SSH2+JBPM+ExtJs4实战,JBPM是重点讲解。实战与demo的区别我不再多说，在以前工作中走过一些弯路，一些实现都是靠自己想象或者听其他人应该怎么实现才是项目中真正需要的。JBPM书上是讲解以工作流为核心去开发应用，...

    ExtJs4.1+Jbpm4+SSH2+Oracle10g实际项目源码

    SSH2+JBPM+ExtJs4实战,JBPM是重点讲解。实战与demo的区别我不再多说，在以前工作中走过一些弯路，一些实现都是靠自己想象或者听其他人应该怎么实现才是项目中真正需要的。JBPM书上是讲解以工作流为核心去开发应用，...

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    ExtJs4_笔记.docx

    一、选择器 4 二、属性 8 四、筛选 10 五、文档处理 11 六、CSS 13 七、事件 14 第二章 ExtJs对js基本语法扩展支持 16 一、动态引用加载 16 二、对类的封装 17 三、基本数据类型 19 四、函数执行时间控制 20 五、...

    ExtJS 2.0实用简明教程

    15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与...

    ExtJSWeb应用程序开发指南(第2版)

    第7章 让ExtJS开始响应事件 第8章 常见Web框架的ExtJS改造 第9章 ExtJS对Ajax的支持 第10章 增强型模板 第11章 数据模型 第12章 Grid组件 第13章 Tree组件 第14章 ExtJS与服务端框架的整合 第15章 主题 第...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    基于Extjs表现层开发的Java企业级框架开源下载（EfsFrame）

    a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计，让繁琐的页面开发简单易行； b) 极大提高企业的项目Web表现层的开发效率； c) 统一企业的项目UI设计，统一的框架结构，能迅速规范企业的Web表现层代码设计规范...

    基于Extjs 和 .Net的企业级开源框架(EfsFrame)

    a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计，让繁琐的页面开发简单易行； b) 极大提高企业的项目Web表现层的开发效率； c) 统一企业的项目UI设计，统一的框架结构，能迅速规范企业的Web表现层代码设计规范...

    基于Extjs的PHP企业级开发框架 v1.0.rar

    a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计，让繁琐的页面开发简单易行； b) 极大提高企业的项目Web表现层的开发效率； c) 统一企业的项目UI设计，统一的框架结构，能迅速规范企业的Web表现层代码设计...

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    由于某种原因，需要做一个控制grid列显示的checkboxgroup，虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏，但是有这样的需求（需要一目了然） 下面先上图 接着前几天做的工作，今天上午完成了定制字段，...

    ExtJs2.0简明教程

    …….13 2.5 事件处理……………………………………………………………………………………………………………15 第三章 使用面板………………………………………………………………………………………………...

    JS之extjsj精通例子

    17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计 进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax...

    EXTJS总结.txt

    一、获取元素（Getting Elements） 1.Ext.get var el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存 2. Ext.fly ...为此元素加入一个事件处理函数...

    Extjs中DisplayField的日期或者数字格式化扩展

    使用 Ext.form.FormPanel 来处理数据时候，某些字段是需要只读的。当然我们可以使用 Ext.form.TextField，然后设置成 ReadOnly，不过这样子的显示效果不是很好，因为始终会有个输入框。所以我们必须使用 Ext.form....

    Ext Js权威指南(.zip.001

    第1章　ext js 4开发入门 / 1 1.1　学习ext js必需的基础知识 / 1 1.2　json概述 / 3 1.2.1　认识json / 3 1.2.2　json的结构 / 3 1.2.3　json的例子 / 4 1.2.4　在javascript中使用json / 4 1.2.5　在.net中使用...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    强大的Web开发框架

    a) 在ExtJs2.X的基础上进行的二次开发与通用接口设计，让繁琐的页面开发简单易行； b) 极大提高企业的项目Web表现层的开发效率； c) 统一企业的项目UI设计，统一的框架结构，能迅速规范企业的Web表现层代码设计规范...

    ExtAspNet_v2.3.2_dll

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    GoodProject Maven Webapp.zip

    系统主要运用在：在系统中一些分页或者样式交互事件处理中使用到了（比如地址选择框） 前端用到了ajax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。...

Magicbox
Global site tag (gtag.js) - Google Analytics