读Ext之五（Dom的低级封装）

上篇看了ext-base-event.js(Ext.lib.Event)，这篇看ext-base-dom.js(Ext.lib.Dom)。
后续EventManager.js(Ext.EventManager)其中会用到该篇的Ext.lib.Dom。

整体浏览ext-base-dom.js可以看到还是一个匿名函数执行，与上一篇不同的是这次并非返回包装好的对象pub，而是直接将对象赋值给Ext.lib.Dom。

(function(){
	var doc = document,
		...;
		
	Ext.lib.Dom = {        
		...
    };
})();

 

一些变量声明，

var doc = document,
	isCSS1 = doc.compatMode == "CSS1Compat",
	MAX = Math.max,		
    ROUND = Math.round,
	PARSEINT = parseInt;

 

doc、Max、ROUND、PARSEINT为简写。好处在上一篇已经提到，clue 还提到了这样写提高了压缩率。即document，Math.max等不会被压缩工具进行名称替换，doc，MAX等则会，可用 YUI Compressor 测试下。

isCSS1用来判断浏览器的文档模式(doctype)，为true是标准模式，false是怪异模式。第一篇 提到了Ext.js中有个Ext.isStrict，和这里的isCSS1是一样的。

Ext作者没有使用Ext.isStrict而是新增了一个变量isCSS1个人猜测原因同doc，MAX，亦或是为了保持此处代码一致性。


接下来是Ext.lib.Dom对象的定义，先看第一个方法，

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(child)是否是p(parent)的子节点。这里有contains和compareDocumentPosition各浏览器 兼容列表 。这个方法与ext-base-event.js的私有方法elContains（上一篇已提到）作用类似，不知为何Ext作者要冗余。

接下来是几个获取视图，文档，视窗宽高的方法，

getViewWidth : function(full) {
    return full ? this.getDocumentWidth() : this.getViewportWidth();
},
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;
},

 

这里仅讲述宽。
getViewportWidth 获取视口的宽。即怪异模式且非Opera使用doc.body.clientWidth获取，IE使用doc.documentElement.clientWidth获取，其它浏览器使用self.innerWidth获取。

getDocumentWidth 获取文档的宽。我们知道如果文档中出现水平滚动条，那么文档的宽将大于视口。因此比较scroll宽度和文档宽度，取其中较大的。
这里仍仍然需要区分浏览器的文档模式，怪异模式使用doc.body.scrollWidth，标准模式使用doc.documentElement.scrollWidth获取。

getViewWidth 是对以上两个方法的封装，full为true则取整个文档宽（含滚动），否则只取文档可视区域宽。


接下来是获取元素相当于文档的位置方法，

getY : function(el) {
    return this.getXY(el)[1];
},
getX : function(el) {
    return this.getXY(el)[0];
},
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 {  
            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
},

 

核心是getXY方法，getX和getY都是调用getXY。获取html元素在页面中（窗口客户区域）的位置(top,left)不是件容易的事。
该方法实现用到了Ext.Element相关方法，后续阅读。

接下来是设置元素位置的方法，

setXY : function(el, xy) {
    (el = Ext.fly(el, '_setXY')).position();
    
    var pts = el.translatePoints(xy),
    	style = el.dom.style,
    	pos;            	
    
    for (pos in pts) {	            
        if(!isNaN(pts[pos])) style[pos] = pts[pos] + "px"
    }
},
setX : function(el, x) {
    this.setXY(el, [x, false]);
},
setY : function(el, y) {
    this.setXY(el, [false, y]);
}

 

核心是setXY，setX和setY都是调用setXY。setXY也依赖于Ext.fly，Ext.fly实际上是Ext.Element.fly。后续阅读。

 

评论

1 楼 duchengning 2010-11-18  

我的hoouf.com中用到createChild，在其他浏览器没问题，但是IE9出不来，也没想到好的替代方法，请各位指点一下。大概代码如下：
var rd = Ext.getDom('regVerCode');
                var rd0 = Ext.get(rd.parentNode);
                rd0.createChild({
                    tag: 'img',
                    src: '/Captcha.jpg',
                    width: '80',
                    height: '25',
                    align: 'absbottom',
                    onclick: "this.src=getCaptcha()",
                    title: "点击刷新验证码"
                });