- 浏览: 315281 次
- 性别:
文章分类
最新评论
-
i042416:
分析在哪?
angular分析 -
何盆盆:
你好,请问您这是Extjs3还是Extjs4
ExtJs源码分析与学习—ExtJs事件机制(一) -
124753561:
引用引用引用引用引用[u][u][u][u][i][i][i] ...
Subvision SVN 服务端与客户端的安装 -
谷超:
请问一下例子中itext是什么版本的?
利用iText生成word文档例子参考 -
geosmart:
正好要用到执行字符串中方法,学习了
java中利用反射机制实现调用给定为字符串的方法名
从这一节开始分析ExtJs对元素(Element)的封装与扩展,首先看Ext.lib.Dom
类Ext.lib.Dom
该类源代码对应的文件为ext-base-dom.js。Ext.lib.Dom主要实现了对document中元素部分方法的兼容性实现。在前面事件(Ext.EventManager)的讲解中已经用到了该类。
该类的实现采用了匿名闭包自执行函数实现,执行完该函数,把封装好的对象赋给了对象Ext.lib.Dom,实现了对该类的封装,这种实现的好处把不需要暴露的变量封装到闭包中,同时这些变量的作用域随Ext.lib.Dom自始自终,而不是调用后立马回收。援引别人写的一段话“严格意义上讲任何一个function在执行时就构成一个闭包,闭包的实质是作用域。普通的function,内部声明的变量在执行完会全被回收掉,这时闭包也被回收了,所以这种闭包对我们没有用处,他只是个作用域。如果一个function的局部变量在执行时被生命周期更长的变量引用,那么这个function执行完时就不能回收掉这个局部变量,这个局部变量的生命周期超出了他的作用域,这时的作用域也不能被回收掉,就形成了典型的闭包。闭包的作用就是使局部变量拥有更大的生命周期,甚至全局的生命周期,这使得闭包可以保存function执行时的状态,特别是那种function中又返回一个function时,被返回的function就可以访问父function执行时的所有局部变量(典型的带状态函数)。因为JS中回收一个变量不是看作用域是否结束,而是看引用数。”
先看Ext.lib.Dom一些变量的声明
var doc = document, isCSS1 = doc.compatMode == "CSS1Compat", MAX = Math.max, ROUND = Math.round, PARSEINT = parseInt;
这些变量的声明一是全局管理,二是可以提高js文件代码的压缩率,http://yui.2clics.net/
可以在线压缩js文件。
isCSS1用来判断浏览器的文档模式(doctype),true为标准模式,false为怪异模式。在Ext类中用Ext.isStrict来判断,这里采用isCSS1,实现的功能是一样的。
下面看Ext.lib.Dom中方法的定义,首先看方法isAncestor
isAncestor : function(p, c) { var ret = false; p = Ext.getDom(p); c = Ext.getDom(c); if (p && c) { if (p.contains) { return p.contains(c); } else if (p.compareDocumentPosition) { return !!(p.compareDocumentPosition(c) & 16); } else { while (c = c.parentNode) { ret = c == p || ret; } } } return ret; },
该方法的功能为判断c是否是p的子元素,并且实现了各浏览器的兼容contains和compareDocumentPosition,关于这两个方法的讲解,参照 javascript contains和compareDocumentPosition 方法来确定是否HTML节点
。在ext-base-event.js Ext.lib.EventObject 中有类似实现elContains。
接下来是返回文档和页面视图高宽,代码如下:
/** * 如果full为真返回页面的实际宽度,否则返回可视宽度 * 实际宽度指整个页面的宽度,包括滚动条看不到的区域,而可视宽度指当前可以看到的宽度 */ getViewWidth : function(full) { return full ? this.getDocumentWidth() : this.getViewportWidth(); }, /** * 如果full为真返回页面的实际高度,否则返回可视高度 */ getViewHeight : function(full) { return full ? this.getDocumentHeight() : this.getViewportHeight(); }, /** * 得到页面的实际高度 */ getDocumentHeight: function() { return MAX(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, this.getViewportHeight()); }, /** * 得到页面的实际宽度 */ getDocumentWidth: function() { return MAX(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, this.getViewportWidth()); }, /** * 得到页面的可视高度 */ getViewportHeight: function(){ return Ext.isIE ? (Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) : self.innerHeight; }, /** * 得到页面的可视宽度 */ getViewportWidth : function() { return !Ext.isStrict && !Ext.isOpera ? doc.body.clientWidth : Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth; },
这一组方法可以分为两类,返回页面的实际高宽度和返回页面的可视宽度,当出现滚动条时,实际高宽度会大于可视高宽度,方法处理了不同浏览器之间的兼容。关于效果请看以下例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ext中getDocumentWidth与getViewportWidth的区别</title> <link rel="stylesheet" type="text/css" href="../ext-3.3.1/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="../ext-3.3.1/ext-all-debug-w-comments.js"></script> <script type="text/javascript" src="../ext-3.3.1/src/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="../ext-3.3.1/src/debug.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif'; Ext.QuickTips.init(); var dom = Ext.lib.Dom; alert("页面的实际宽度:"+dom.getDocumentWidth()); alert("页面的可视宽度:"+dom.getViewportWidth()); }); </script> </head> <body> <div style="width:2000px;"> Ext中getDocumentWidth与getViewportWidth的区别Ext中getDocumentWidth与getViewportWidth的区别Ext中getDocumentWidth与getViewportWidth的区别 Ext中getDocumentWidth与getViewportWidth的区别 </div> </body> </html>
接下来的方法是获取元素相对于文档的位置
/** * 得到给定元素的left */ getX : function(el) { return this.getXY(el)[0]; }, /** * 得到给定元素的[top,left] */ getXY : function(el) { var p, pe, b, bt, bl, dbd, x = 0, y = 0, scroll, hasAbsolute, bd = (doc.body || doc.documentElement), ret = [0,0]; el = Ext.getDom(el); if(el != bd){ if (el.getBoundingClientRect) { b = el.getBoundingClientRect(); scroll = fly(document).getScroll(); ret = [ROUND(b.left + scroll.left), ROUND(b.top + scroll.top)]; } else {//不支持getBoundingClientRect,实现起来比较啰嗦,得循环获得元素在页面中的绝对位置 p = el; hasAbsolute = fly(el).isStyle("position", "absolute"); while (p) { pe = fly(p); x += p.offsetLeft; y += p.offsetTop; hasAbsolute = hasAbsolute || pe.isStyle("position", "absolute"); if (Ext.isGecko) { y += bt = PARSEINT(pe.getStyle("borderTopWidth"), 10) || 0; x += bl = PARSEINT(pe.getStyle("borderLeftWidth"), 10) || 0; if (p != el && !pe.isStyle('overflow','visible')) { x += bl; y += bt; } } p = p.offsetParent; } if (Ext.isSafari && hasAbsolute) { x -= bd.offsetLeft; y -= bd.offsetTop; } if (Ext.isGecko && !hasAbsolute) { dbd = fly(bd); x += PARSEINT(dbd.getStyle("borderLeftWidth"), 10) || 0; y += PARSEINT(dbd.getStyle("borderTopWidth"), 10) || 0; } p = el.parentNode; while (p && p != bd) { if (!Ext.isOpera || (p.tagName != 'TR' && !fly(p).isStyle("display", "inline"))) { x -= p.scrollLeft; y -= p.scrollTop; } p = p.parentNode; } ret = [x,y]; } } return ret; },
这里需要说明一下关于方法el.getBoundingClientRect,该方法获得页面中某个元素的左、上、右和下分别相对浏览器视窗的位置。该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。见代码中不支持的实现。关于该方法的运行效果看以下例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>方法getBoundingClientRect Demo</title> </head> <body style="width: 2000px; height: 1000px;"> <div id="demo" style="position: absolute; left: 518px; right: 100px; width: 500px; height: 500px; background: #CC0000; top: 114px;"> Demo为了方便就直接用绝对定位的元素 </div> </body> </html> <script> document.getElementById('demo').onclick=function (){ if (document.documentElement.getBoundingClientRect) { alert("left:"+this.getBoundingClientRect().left) alert("top:"+this.getBoundingClientRect().top) alert("right:"+this.getBoundingClientRect().right) alert("bottom:"+this.getBoundingClientRect().bottom) var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop; alert("Demo的位置是X:"+X+";Y:"+Y) } } </script>
接下来是设置元素的x和y坐标,这三个方法依赖于Ext.fly,Ext.fly实际上是Ext.Element.fly和el.translatePoints(xy)(修改元素的left属性值和top属性),接下来会讲解道这两个方法。
评论
上面文中的链接加错了,应该为
http://linder0209.iteye.com/blog/980826
发表评论
-
ExtJs源码分析与学习—Ext.ToolTip应用
2011-12-29 14:18 1795源码待分析,先粘一例子备用 // ... -
ExtJs源码分析与学习—遮罩层
2011-09-06 16:49 4732类Ext.LoadMask ... -
ExtJs源码分析与学习—Ext.UpdateManager
2011-09-06 16:12 2134如果想让html页面中任意元素自动局部刷新,而不是整 ... -
ExtJs源码分析与学习—ExtJs元素Element(六)
2011-06-08 10:41 1753批量操作元素Ext.CompositeElementLite ... -
ExtJs源码分析与学习—ExtJs元素Element(五)
2011-06-07 17:35 1890元素的查询Ext.DomQuery 该 ... -
ExtJs源码分析与学习—ExtJs元素Element(四)
2011-06-07 17:17 2941元素的操作Ext.DomHelper ... -
ExtJs源码分析与学习—ExtJs元素Element(三)
2011-06-07 17:06 1004Ext.Element扩展 通过Ex ... -
ExtJs源码分析与学习—ExtJs元素Element(二)
2011-06-07 16:42 2579元素操作核心类Ext.Elemen ... -
ExtJs源码分析与学习—工具类Ext.util.TextMetrics
2011-06-07 15:11 2001Ext提供了一个 ... -
ExtJs源码分析与学习—ExtJs事件机制(六)
2011-06-07 11:25 1441最后把涉及到Ext事件的相关类图贴到这里 ... -
ExtJs源码分析与学习—ExtJs事件机制(五)
2011-06-07 11:15 3013最近一直忙着做产品,所以好久没有写文章了,下面接着 ... -
Ext 组件操作总结——会不断完善
2011-05-10 16:36 26501、Ext.Component 该组件在渲染的时候会默认的 ... -
ExtJs表单几种验证与扩展
2011-05-03 16:26 4853首先说明一下表单验证与其相关的一些设置 Ext ... -
ExtJs源码分析与学习—ExtJs事件机制(四)
2011-03-19 23:37 5268ExtJs组件事件——ExtJs自定义事件的处理 ... -
ExtJs源码分析与学习—ExtJs事件机制(三)
2011-03-15 20:20 3170这篇讲ExtJs对事件的管理和调用 Ext ... -
ExtJs源码分析与学习—ExtJs事件机制(二)
2011-03-15 20:15 2519在ExtJs源码分析与学习—ExtJs事件机制( ... -
ExtJs源码分析与学习—ExtJs事件机制(一)
2011-03-15 18:53 2747前面讲了ExtJs核 ... -
ExtJs源码分析与学习—ExtJs核心代码扩展
2011-01-20 19:16 2041前面三篇文章参考作者snandy总结了Ext中核心 ... -
ExtJs源码分析与学习—ExtJs核心代码(三)
2011-01-17 17:29 2121Ext为javascript的一些对象进行了扩展,主要有Str ... -
ExtJs源码分析与学习—ExtJs核心代码(二)
2011-01-17 16:23 1825接上篇 下面介绍Ext.js ...
相关推荐
ExtJS3.0 源码分析与开发实例宝典
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...
NULL 博文链接:https://linder0209.iteye.com/blog/865372
Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录,便于方便和阅读. 文档比较大,一共压缩成12卷.需12卷全部下载完。 就第一个...
《ExtJS源码分析与开发实例宝典》是一本不错的关于ExtJS开发实践的教程,特附上源码,与各位共享,谢谢。
Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录,便于方便和阅读. 文档比较大,一共压缩成12卷.需12卷全部下载完。 就第一个...
ExtJS源码分析与开发实例宝典完整版 1、JS画图部分代码在IE8上看不到效果,因为IE8不支持VML。 2、扩展的组件为作者独立完成,仅供学习之用,一些组件并没有经过严格的测试。 如果需要用到项目之中,请自行测试。 ...
extjs源码分析与实例开发宝典PDF格式
extjs源码分析与开发实例宝典PDF格式文件
extjs源码分析与开发实例宝典part10共10卷
extjs源码分析与实例开发宝典pdf格式电子书第三部分
extjs源码分析与实例开发宝典part08共10个分卷