一、addListener方法
var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);
二、ExtJS支持的自定义事件
//创建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('发生了自定义事件');
});
<input type='button' value='say' onclick='per.say()'>
自定义事件的另外一个例子:
//继承自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');//创建对象”代码之后的内容替换为:
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受管事件监听器:
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传播分发事件:
//创建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('服务员开始收拾盘子。');
});
<input type='button' value='员工吃饭' onclick='emp.eat()'>
五、Ext.EventObject示例
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使用
Ext.EventManager.addListener('btn','click',handler);//绑定处理函数
分享到:
相关推荐
在本篇《ExtJS4学习笔记十一:树控件的使用》中,我们将深入探讨ExtJS框架中的树形控件(TreePanel),这是一种强大的UI组件,用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强,使其更加灵活且易于使用。...
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...
总体而言,这篇学习笔记和相关资源将帮助读者深入理解ExtJS3.3版本的核心概念,如组件系统、数据绑定、事件处理以及源码解析,同时也能提供对ExtJS 4桌面应用开发的见解,这对于想要扩展知识面或解决特定问题的ExtJS...
本学习笔记将深入探讨ExtJS 2.1的关键概念和技术,帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中,应用程序通常基于组件树构建,每个组件都有自己的属性、方法和事件。理解这种结构对于布局...
EXTJS 是一个强大的JavaScript 库,专用于...EXTJS 4.0的学习涉及到了组件的创建、布局的管理、数据绑定和事件处理等多个方面,理解并熟练掌握这些知识点,能帮助开发者构建出功能强大、用户体验优秀的Web应用程序。
本资源包包含了与ExtJS 3.4相关的学习资料,包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`Extjs学习笔记.docx`,旨在帮助初学者或有经验的开发者更好地理解和掌握ExtJS 3.4。 `Ext-core.pdf` 是关于Ext Core的文档...
以上介绍的只是Extjs布局管理中的一小部分,Extjs官网提供了丰富的例子和详细的文档,这是学习Extjs布局的最佳资源。通过官网的例子,可以直观地看到不同布局类型的效果和配置方法,极大地便利了开发者的布局实践和...
这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...
本笔记源码主要展示了如何在ExtJS 4中运用MVC模式进行开发。 一、MVC模式 MVC模式将应用分为三个主要组件:模型(Model)、视图(View)和控制器(Controller)。模型处理数据和业务逻辑,视图负责显示用户界面,...
在EXTJS这个强大的JavaScript框架中,Tree和Grid是两种...在EXTJS中实现这种结合需要对EXTJS的组件模型、事件处理和数据绑定有深入的理解。通过不断的实践和学习,开发者可以掌握这一高级技巧,提高应用的用户体验。
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
EXTJS 是一种基于 JavaScript 的富客户端应用开发框架,主要用于构建桌面级的Web应用程序。...在实际开发中,你可以根据需要进一步学习EXTJS的组件系统、数据绑定、事件处理和高级布局等高级特性。
在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先,EXTJS的Grid由多个组件构成,其中最重要的是`ColumnModel`,它负责定义Grid中的列属性。在示例代码中,我们创建了一个`ColumnModel`对象...
本资源包含ExtJs的API文档、笔记以及示例,帮助开发者深入理解和使用ExtJs。 首先,API文档是ExtJs开发的基础,其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考,有助于开发者...