- 浏览: 252552 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
dhunter:
mongodb 需要auth 怎么加呢?
linux下mongodb+nodejs环境搭建 -
y1d2y3xyz:
xie666 写道html.push('<td alig ...
javascript DOM操作性能-----创建DOM -
xie666:
html.push('<td align="c ...
javascript DOM操作性能-----创建DOM -
轩辕丶菓菓:
bushkarl 写道那我后台用struts2,我的name一 ...
Ext表单之loadRecord用法详解 -
heikediguo:
这样不会按照你想要的顺序加载。
加载JS文件
Extjs源码之--Ext.lib.Event 中分析了EXT事件简单封装,其实EXT事件主要有三个对象组成,而这些对象是相互继承或者是说结构上的从下到上的依赖关系,Ext.lib.Event是基础,封装了基本的事件模型,他是这个事件体系中的核心和基础,是属于adapter级别的,他屏蔽了浏览器的特征,这个对象其实是不对外的,从Ext源码中你也能发现这么一段(This function should ALWAYS be called from Ext.EventManager),这是对事件的监听的,其他的就封装在Ext.EventObject中。接下来是 Ext.EventObject 对象
看下面这段代码,这是Ext.EventObject构造函数
var E = Ext.lib.Event; Ext.EventObjectImpl = function(e){ if(e){ this.setEvent(e.browserEvent || e);//注意这里 } }
在看 setEvent 函数都做了些什么
Ext.EventObjectImpl.prototype = { /** @private */ setEvent : function(e){ var me = this; if(e == me || (e && e.browserEvent)){ // already wrapped return e; } me.browserEvent = e; if(e){ // normalize buttons me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1); if(e.type == 'click' && me.button == -1){ me.button = 0; } me.type = e.type; me.shiftKey = e.shiftKey; // mac metaKey behaves like ctrlKey me.ctrlKey = e.ctrlKey || e.metaKey || false; me.altKey = e.altKey; // in getKey these will be normalized for the mac me.keyCode = e.keyCode; me.charCode = e.charCode; // cache the target for the delayed and or buffered events me.target = E.getTarget(e); // same for XY me.xy = E.getXY(e); }else{ me.button = -1; me.shiftKey = false; me.ctrlKey = false; me.altKey = false; me.keyCode = 0; me.charCode = 0; me.target = null; me.xy = [0, 0]; } return me; } }
从上面代码很清楚的看到,Ext.EventObject构造函数除了对存在的兼容性问题进行屏蔽,还把 Ext.lib.Event属性传给了新的对象,如:me.target = E.getTarget(e);,me.xy = E.getXY(e);。接下来就是一些对外的接口方法,所以这个对象是提供对外接口的
Ext.EventObject = function(){ var E = Ext.lib.Event, // safari keypress events for special keys return bad keycodes safariKeys = { }, // normalize button clicks btnMap = Ext.isIE ? {1:0,4:1,2:2} : (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2}); Ext.EventObjectImpl = function(e){ if(e){ this.setEvent(e.browserEvent || e); } }; Ext.EventObjectImpl.prototype = { /** @private */ setEvent : function(e){ }, 。。。。。。。。 } return new Ext.EventObjectImpl(); }
再来看看Ext.EventManager 对象的结构:
Ext.EventManager = function(){ var .......//一堆变量/常量的定义 E = Ext.lib.Event,//这俩个变量要注意 D = Ext.lib.Dom,// ..............////一堆变量/常量的定义 //接下来一堆的 function ...................... //接下来是返回对象,也就是这个对象为外部提供接口 var pub = { addListener : function(element, eventName, fn, scope, options){}, removeListener : function(el, eventName, fn, scope){}, removeAll : function(el){}, getListeners : function(el, eventName) {}, purgeElement : function(el, recurse, eventName) {}, _unload : function() {}, onDocumentReady : function(fn, scope, options){} }; pub.stoppedMouseDownEvent = new Ext.util.Event(); return pub; }
从上面提供的接口看,Ext.EventManager实际上还是对 Ext.lib.Event的扩展和封装,以提供统一的对外接口,而且这里还提供了onDocumentReady这个接口,这个接口涉及到浏览器兼容性问题!而且这个接口的很多函数都用到了Ext.EventObject对象中的方法,所以从代码上看Ext.EventManager是依赖于Ext.EventObject的扩展的!理解了这三个对象的关系对于EXT的事件的理解就简单多了,而且要是看了源码的话,在自己应用中就知道应该注意哪些问题,特别是兼容性和性能上!
- EventManager.zip (7.4 KB)
- 下载次数: 3
发表评论
-
Extjs源码之--Ext.lib.Event(事件的简单封装)
2011-10-16 11:34 2611这个对象是对事件的基础封装,在实际使用中,我们往往不从这里去 ... -
Extjs源码之--Ext.lib.Dom(Dom的基本封装)
2011-10-13 23:31 2309Extjs的对Dom最基础的封装,主要包括:元素的包含关系,元 ... -
Extjs源码之---Ext.util.DelayedTask
2011-10-12 22:56 2391/* 创建对象 var task = new Ext. ... -
Extjs源码之-- Ext.util.JSON
2011-09-23 23:19 3989很多写extjs的朋友说,Extjs的源码之间的关系太紧了,所 ... -
Ext.form.ComboBox 远程带分页显示
2011-09-23 22:00 1832很多时候针对大数据量的下拉列表的时候,我们通常需要分页显示数据 ... -
Ext.form.ComboBox change事件的BUG
2011-09-08 23:11 5346因为项目需要,想用Ext的combo控件实现动态级联,发现co ... -
Ext.grid.EditorGridPanel 中combo的显示异常
2011-09-03 00:58 2736Ext.grid.EditorGridPanel 在项目中用到 ... -
extjs源码分析-Ext.util.TaskRunner(模拟多线程)
2011-08-12 12:09 2957/** * @class Ext.util.TaskR ... -
extjs源码分析-016(Ext....)
2011-03-28 23:04 1012Ext.apply(Ext, function(){ ... -
extjs源码分析-015(Number扩展)
2011-03-20 01:03 831Ext.applyIf(Number.prototype, ... -
extjs源码分析-013(Array扩展)
2011-03-19 11:03 1078Ext.applyIf(Array.prototype, ... -
extjs源码分析-013(String扩展)
2011-03-18 23:05 1214//字符串替换 /* var cls = 'my-cl ... -
extjs源码分析-012(Funtion扩展)
2011-03-18 22:42 1253Ext.apply(Function.prototype, ... -
extjs源码分析-011(namespace)
2011-03-10 22:54 1043//命名空间,就是创建一个OBJ的一个属性, names ... -
extjs源码分析-009(Ext.urlAppend/toArray)
2011-03-10 22:43 1815//在URL后面追加参数 urlAppend : fun ... -
extjs源码分析-009(Ext.urlDecode/urlEncode)
2011-03-09 23:17 3186//把json格式转化成url的编码方式 // e.g. ... -
extjs源码分析-008(Ext.removeNode)
2011-03-09 22:35 1740DOC = document; removeNode : ... -
extjs源码分析-007(Ext.each)
2011-02-08 14:40 1576each : function(array, fn ... -
extjs源码分析-006(Ext.override/Ext.extend)
2011-02-08 00:40 2085override : function(o ... -
extjs源码分析-005(Ext.getDom,Ext.getBody)
2011-02-08 00:22 2003var DOC = document; //获取DOM节 ...
相关推荐
Ext JS - JavaScript Library Copyright (c) 2006-2009, Ext JS, LLC All rights reserved. licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open ...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
茉莉花节点jsdom-extjs-testing-tool 使用 jasmine-node 和 jsdom 的功能性前端 Ext.JS 测试自动化工具如果您已经安装了节点包模块( ),安装将为您获取所需的库。Ext.JS 设置使用 Ext.JS 包并遵循 Sencha cmd 企业...
ExtJS----HelloWorld程序源码
extjs-theme-bootstrap-master.zip
ext-3.2.1 工具 用于Extjs开发使用。
http://www.akawebdesign.com/2009/08/27/extjs-3-0-themes/ 但是到了ExtJS 4.x,即使4.1 已经正式发布,还是很难找到官方以外的主题。 目前ExtJS 4.1 可用的布景选项有: Default(淡蓝色) Gray(灰色) Neptune
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
spket-1.6.18——Javascript/Ajax/ExtJS开发插件 这款插件主要用于为JavaScript开发的用户提供支持,方便开发人员快速进行开发。 spket-1.2以后的版本好像是收费的,本资源已破解,所以您无需为使用的期限而担忧了。
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
EXTJS4 类似于bootstrap的主题
<script type = "text/javascript" src = "../ext-3.3.0/adapter/ext/ext-base.js"></script> <script type = "text/javascript" src = "../ext-3.3.0/ext-all.js"></script> <script type = "text/javascript" ...
NULL 博文链接:https://bw198605.iteye.com/blog/1590113
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
语言程序设计资料:ExtJs学习笔记-2积分.doc
Ext js-4.1.1+Ext js-4.1.0+Ext4.1.0API中文版 .
<script type="text/javascript" src="extjs3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs3.2/ext-all-debug.js"></script> <script type="text/javascript" src="extjs3.2/...
ExtJS快速入门--传智播客--蔡世友
Sencha Ext JS 4.2.1.883 GPLv3 ...$ git submodule add git@github.com:Projacto/extjs-4-gpl.git public/extjs $ git submodule update --init 文档 有关,请参阅 。 来源 CDN JS //cdn.sencha.com/ext/gpl/4.2.1