`

ExtJs源码分析与学习—ExtJs元素Element（一）

EXTJavaScriptCSSC#C++ 
阅读更多

      从这一节开始分析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属性），接下来会讲解道这两个方法。

 

分享到：
| ExtJs源码分析与学习—工具类Ext.util.Tex ...
评论
1 楼 tangjikey 2012-05-24  
javascript contains和compareDocumentPosition 方法来确定是否HTML节点
上面文中的链接加错了，应该为
http://linder0209.iteye.com/blog/980826
发表评论

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

相关推荐

    深入剖析ExtJS_2.2实现及应用

    作者采用了"core→element→component"的主线，将整个ExtJS源码结构串联起来，确保读者能逐步深入学习，理解每一层的细节。 "Introduction"章节为初学者提供了入门指导，涵盖了ExtJS的基本概念和安装步骤。"Core...

    深入剖析ExtJS 2.2实现及应用连载（全集） DOC精排版！

    本书还深入探讨了JavaScript技术，特别是针对ExtJS源码分析所需的JS知识点。虽然不完全是针对JavaScript初学者，但对于进阶开发者，它提供了许多其他书籍中未涉及的内容，如正则表达式的解析原理和高效正则编写，...

    ExtJS中文手册.pdf

    - **源码细节**：发布ExtJS源码时会涉及到一些具体的细节问题，如文件结构、依赖关系等。 - **从何入手**：对于初学者来说，可以从简单的示例开始，逐步深入到更复杂的组件和功能。 #### 9. 适配器Adapters与核心...

    ExtJS3.0深入浅出(书)源码

    **二、源码分析** 书中对ExtJS 3.0的源码进行了深入解析，帮助读者理解其内部工作原理。这包括： 1. **核心类库**：讲解了Ext的基础类，如Element、Component、Store、Grid等，这些是构建所有组件的基础。 2. **...

    读Ext之十五（操作批量元素）

    在IT行业中，JavaScript库ExtJS是一个广泛使用的前端框架，它为构建复杂的...因此，深入学习"读Ext之十五（操作批量元素）"这篇博客，并结合`CompositeElementLite.js`的源码分析，将是提升ExtJS开发能力的关键步骤。

    【JavaScript源代码】EXTJS7实现点击拖拉选择文本.docx

    EXTJS的源码中定义了`Ext.Component`类，它维护了一个名为`userSelectableClsMap`的映射对象，用于存储不同`userSelectable`值所对应的CSS类。当`userSelectable`的值改变时，EXTJS会更新相应的样式类，以实现文本...

    ext-3.0.0源码

    EXTJS 3.0.0源码的分析可以帮助我们深入理解其工作原理，从而更好地利用这个框架来开发复杂的Web应用。 EXTJS的核心是组件模型，它包括各种可复用的UI组件，如表格、面板、表单、树形视图、菜单等。在EXT 3.0.0中，...

    深入剖析EXT 2.2及应用

    书中的内容结构严谨，以"core"（核心）、"element"（元素）和"component"（组件）这三个关键词为主线，串联起EXTJS的整个源码体系。同时，通过一个网络办公系统的实例，将各个知识点贯穿起来，使读者能够逐步学习并...

    EXTJS经典教程

    - **Element对象**：Ext的核心概念之一，用于操作DOM元素，提供了丰富的API来进行DOM操作，如获取、设置样式、位置等。 - **获取多个DOM的节点**：可以通过CSS选择器获取多个DOM节点，并进行批量操作。 - **响应...

    EXT中文手册,ext开发帮手

    手册通常包括EXT的基本概念、安装和下载步骤、组件的使用方法、事件处理、Ajax通信、源码分析等多个章节。其中，"EXT简介"部分会介绍EXT的基本理念和架构；"下载EXT"则会指导开发者如何获取EXT库并将其引入项目；...

    asp.net ext 中文手册

    `Element`是ExtJS的核心类之一，它封装了对DOM元素的操作，提供了一套API用于查找、选择、操作和事件绑定等。通过`Element`，开发者可以更简洁、高效地获取和操作DOM节点，而无需直接使用原生JavaScript的DOM操作。...

    ext js中文开发手册

    源码分析涉及组件架构、事件处理流程、数据绑定机制等方面，对于定制高级功能和调试问题尤为重要。 **九、程序规划入门** 在使用EXT JS进行项目开发前，合理的规划至关重要。这包括选择合适的布局、定义组件层次、...

    EXT-js-中文手册

    - **源码分析**：深入分析EXT的源码结构，帮助开发者理解其内部机制。 - **细节讲解**：特别关注了在发布EXT源码过程中需要注意的细节问题，如兼容性考虑、性能优化等。 #### 10. EXT程序规划入门 - **准备工作**：...

    EXT 中文手册内具实例代码

    - **案例分析**：通过具体的案例分析，帮助开发者深入理解 Ext 的使用方法。 综上所述，《EXT 中文手册》涵盖了 Ext 框架的基础知识、核心概念、高级功能以及实际应用案例，对于想要掌握 Ext 开发的读者来说是一份...

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