事件的定义
事件一个消息、一次函数的调用,可由程序(或其中的部分)生成;事件源,用于通知其他的程序(的其中一部分);事件处理器,就是触发某些内容。事件会由用户的动作或事件源的状态发生改变而生成。事件源独立于事件侦听器,哪怕是没有人去侦听它或定义好一个侦听器都是生成事件。我们说无限循环(infinite loop)的思想在于:“有用户把鼠标移动到[x,y]坐标了,我正在通知全体的成员,有没有人侦听、谁是侦听者不是我关心的事情” 。侦听者(listener)的思想在于:“用户一移动鼠标,就要告诉我,让我执行某些事情”。
Ext中的事件
Ext中的事件可以分为“两类”: DOM事件与 JavaScript(或程序)事件。
DOM事件
显示网页的浏览器已经有某种“无限循环”的机制以处理用户的动作,并根据DOM元素所发生的动作去触发事件。
以往我们一般是这样设置DOM元素事件侦听器的:
<div id="mydiv" onclick="alert('你点击了我。')">请点击!</div>
Ext.Element 对DOM元素的事件进行打包,现在设置事件侦听器的方式变为这样:
Ext.get('mydiv').on('click', function() {alert('你点击了我。');});
It can be said that DOM events are "passed-through" from DOM through Ext.Element to listeners.
JavaScript事件
现在,事件源不但会是DOM元素,而且可以是任意的JavaScrpt对象,轻松实现事件源的逻辑和加入侦听器。可是,这带来什么好的方面呢?
试想一下一个复杂的组件如GRID。只对DOM事件编程话,像列移动这样的用户动作处理起来变得极端复杂。你必须要侦听DOM的元素,处理鼠标的点击、移动、计算出列移动的距离等等。如采用GRID组件的话,相信可摆脱烦复的工作,变为一件轻松的事情:所有东西完成好后,通知你“用户已经移动列三到位置一”。这就是GRID的功劳:它触发JS事件,通知预设好的侦听者发生了什么事儿。其他的ext组件也是这么一回事。如验证事件、树折叠...
如何监听事件
对于Ext类中的某个对象,假设一面板(Panel),当面板大小变化时,就会执行相应的动作,这样你需要加入一个侦听器来实现你的动作:
//创建面板
var myPanel = new Ext.Panel({...});
// 加入大小变化的侦听器
myPanel.on('resize', function(panel, w, h) {
alert('Panel resized to ' + w + 'x' + h);
});
这样的效果是,无论任何时候面板myPanel一发生变化,便会调用函数执行你预设的动作。
如何创建事件源?
事件相关的函数是由Ext.util.Observable 类来实现,所以如果现在是一个事件源的扩展程序,只要继承Observable便可。而且,如果你已经是从Observable的子类上获取继承(Panel、Grid、Form、Tree等)那么已经是一个事件源了。事件的触发是由父类所执行的。
随便监听和触发事件~尽情地使用事件吧!
转http://www.extjs.com/learn/Tutorial:Events_Explained_%28Chinese%29
分享到:
相关推荐
Ext中的事件 简述模板 模板(Templates)的函数 教你创建Ext UI控件 事件的处理 Ext中的继承 Ext的类设计 Ajax通讯 JSON处理方法 函数的原型扩展 组件的使用: Tab标签页 Ext 1.x中的布局 Grid组件初学 Grid的...
EXT dojochina Ext事件.rar EXT dojochina Ext事件.rar
EXTjs2 的treeNode 带有checkbox,可是API中,关于checkbox的事件就只有一个checkchange事件,所以写个方法传上来。
ext封装的太死板,里面有常用到的15个ext.js触发事件和监听事件,对ext了解的不是特别深入,大部分都是经常碰到的
EXT江湖05事件系统
10.3. 在form中使用fckeditor A. 常见问题乱弹 A.1. ext到底是收费还是免费 A.2. 怎么查看ext2里的api文档 A.3. 如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来...
目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...
3. 如果看到全中文的响应页面,说明工程运行正常,参见ExtStart.js文档,有非常详细的注释说明Ext.Element类与Ext.select()选择器的使用,以及事件处理的几种使用情况,最后是Ext框架使用Ajax技术的演示部分,需要...
在UI中摆放菜单 58 Menu的分配方式: 58 练一练 60 动态添加菜单按钮到Toolbar 61 更方便的是 61 下一步是 62 模板(Templates)起步 62 第一步 您的HTML模板 62 第二步,将数据加入到模板中 62 下一步 63 学习利用...
花费半年心血研究解读总结。包含了Ext的核心类解析,Ext对象原理,Ext事件模型,Ext布局模型,AJAX原理,Ext数据模型的本质原理;UML图例详解。
列模型(Column Model) 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种Item的类型 57 Item属性 57 在UI中摆放...
第2章介绍了ext js 4的获取、ext js库的配置与使用、语法、本地化,以及一个经典的入门示例;第3章详细讲解了调试的工具及技巧,这是本书的重要内容,希望所有web开发者都能掌握;第4章全面介绍了ext js的基础架构;...
10.3. 在form中使用fckeditor 10.4. 健康快乐动起来,fx里的动画效果 10.5. 悄悄的更新网页内容 A. 常见问题乱弹 A.1. ext到底是收费还是免费 A.2. 怎么查看ext2里的api文档 A.3. 如何在页面中引用ext A.3.1. 顺便...
6.3.4 在form中使用Ext.Direct加载数据 185 6.3.5 在form中使用Ext.Direct提交数据 187 6.3.6 使用polling方式进行轮询 189 6.4 本章小结 191 第7章 Store 192 7.1 Store的结构 192 7.2 Ext.data.Field 197 7.3 Ext....
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如 addBehaviors({ // id=foo下所有的a标签加入click事件 '#foo a@click' : function(e, t){ // do something }, // 用,分隔多个选择器 '#foo a, #bar ...
1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...
Ext看起来是非常简单的东西,稍有点编程知识的人,按照《ExtJS中文手册》中的指南,半小时就能学会使用Ext。然而,当准备使用Ext开发一个项目时,却不知道从何处入手,或者是在使用Ext的时候,出了一点小问题自己不...
实现ext与JSON的数据传递和显示,以及ext树的事件响应
响应事件.............................................................................................................................5 使用Widgets.........................................................