【Extjs学习六】extjs2-element全面分析

分析图标见附件excel表格，大家可以可通过数据帅选等方式自行分析。

Ext.element.prototype中共有方法151个，按照主要功能我将她们大致分为domhelper、domquery、css/style、position、event、drapdrop、综合7大类。
一、    position类型（57个）
分析position类型方法，我们可以发现其中包含26个get和set配套的方法，对应了position中的13个概念，另外，get开头无set对应14个，set开头无get对应的方法3个.，剩余14个既不是get开头也不是set开头的类，下面我重点分析下position包含的13个概念。
首先，我画出element关于position的坐标图如下：
 

1、x：左上角定点相对于页面坐标平面的x坐标
2、y：左上角定点相对于页面坐标平面的x坐标
3、xy：【x,y】左上角定点相对于页面坐标平面的坐标
4、left：线条x=left
5、top：线条y=top
6、right：线条x=right
7、bottom：线条y=bottom
8、Height：线条Height = bottom - top
9、Width：线条Width = right- left
10、regin：{top, left, bottom, right}
11、box：{x, y, width, height}
12、positioning：{position,left,right,top,bottom,z-index}
13、Size：{width,height}
 
接下来，我们来分析下get无set配套的方法。
getOffsetsTo( Mixed element ) : Array计算从element到当前元素的偏移量
getComputedHeight() : Number得到计算过的高度,得到offsetHeight或css中定义的height值之一,如果使用了padding/borders,也会计算进去
getComputedWidth() : Number见getComputedHeight
getStyleSize　
getViewSize() : Object得到clientHeight和clientWidth信息给成的对象{width,height}
setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element马上改变当前元素的位置和尺寸
getBorderWidth( String side ) : Number得到side指定的边框之和,side可以是t, l, r, b或他们的任意组合,比如getBorderWidth("lr")就是得到左边框和右边框之和
getPadding( String side ) : Number得到由side指定的padding之和
getAnchorXY( [String anchor], [Object size], [Boolean local] ) : Array得到当前元素锚点指定的坐标值 anchor定义参见alignTo方法,默认为c
getAlignToXY( Mixed element, String position, [Array offsets] ) : Array得到当前元素按position规则对齐到element时的XY坐标值 position/offsets参数参见alignTo方法
getConstrainToXY　
getCenterXY() : Array如果当前元素要居中对齐时的横纵坐标值,等价getAlignToXY(document, 'c-c')
getFrameWidth( String sides ) : Number得到sides定义的border宽度和padding定义的宽度之和,side定义见getBorderWidth
getScroll() : Object得到一个批示滚动条位置的对象{left, top}

1、OffsetsTo
到某个元素的偏移量

2、ComputedHeight
得到计算过的高度,得到offsetHeight或css中定义的height值之一,如果使用了padding/borders,也会计算进去

3、ComputedWidth
得到计算过的高度,得到offsetWidth或css中定义的width值之一,如果使用了padding/borders,也会计算进去

4、StyleSize
    getStyleSize : function(){
        var w, h, d = this.dom, s = d.style;
        if(s.width && s.width != 'auto'){
            w = parseInt(s.width, 10);
            if(Ext.isBorderBox){
               w -= this.getFrameWidth('lr');
            }
        }
        if(s.height && s.height != 'auto'){
            h = parseInt(s.height, 10);
            if(Ext.isBorderBox){
               h -= this.getFrameWidth('tb');
            }
        }
        return {width: w || this.getWidth(true), height: h || this.getHeight(true)};

    },
概念：StyleSize 取style的width和height或得到减去border和padding的size。Size的概念见上面的13个概念中的第13个。

5、ViewSize
/**
     * Returns the width and height of the viewport.
     * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
     */
    getViewSize : function(){
        var d = this.dom, doc = document, aw = 0, ah = 0;
        if(d == doc || d == doc.body){
            return {width : D.getViewWidth(), height: D.getViewHeight()};
        }else{
            return {
                width : d.clientWidth,
                height: d.clientHeight
            };
        }
},
从这里我们可以看到ViewSize 的概念是这样的
{
       width : d.clientWidth,
       height: d.clientHeight
};
（client可视化区域、scroll滚动时内容区域、offerset元素外边缘到外部容器内边缘之间的距离）
从(d == doc || d == doc.body)我们也可以发现，IE和别的浏览器针对这个概念的解析是不一样，我们可以跟踪到ext-lib中发现这个现象。

6、BorderWidth
Borders的主要概念如下，得到width之和，比方
El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
如getBorderWidth("lr")得到的是l和r的width之和。

7、Padding
El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
getPadding原理同上getBorderWidth("lr")

8、Margins
El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
get Margins原理同上getBorderWidth("lr")

9、AnchorXY
X和Y的值，针对anchor布局而言

10、AlignToXY
距离某元素的X和Y的值

11、ConstrainToXY
得到[x, y]，具体作用不详

12、CenterXY
得到元素居中后的[x,y]

13、FrameWidth
* Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth() for more information about the sides.

14、Scroll
    * Returns the current scroll position of the element.
* @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}

我们再来分析下set无get配套的方法。
setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element设置当前元素相对于页面的横纵坐标
setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element马上改变当前元素的位置和尺寸
setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element设置透明度，opacity为1完全不透明,0完全透明
setLeftTop( String left, String top ) : Ext.Element设置css 对象的属性值

14、Location
    XY

15、Bounds
    位置和尺寸   

16、Opacity
    Style.opacity 结合动画效果

17、LeftTop
        this.dom.style.left = this.addUnits(left);
    this.dom.style.top = this.addUnits(top);


总结：ext.element在处理position相关信息的时候需要处理浏览器的差异，ext.element采取的策略我不是很清楚，有了解的兄弟请不吝赐教。


 
  


二、    css/style类型(42个)
我们可以看到这个类型的方法最重要的就是Style的get、set方法。其实上面的position方法基本上也是属于这个类型，由于比较重要，且position的相关属性是动画的基础，所以单独进行了分析。
Ext.element方法我觉得针对style的封装从代码的分层角度来讲不是很好，很多基本的方法应该移交到ext.lib.dom里面去实现，element应该是针对dom的扩展，只要在相关方法中用结合动画做些委派就可以了。



三、    domhelper类型（12个）
domhelper的方法主要是操作浏览器dom对象的创建、插入等操作。
这里基本上就是委派domhelper的方法，这里我觉得不爽的是domhelper
也调用了element的方法，完全是通过代码来保证调用的正确性，把调用的这部分代码转移到ext.lib.dom中去应该更合理。

四、    domquery类型（15个）
基本上是委派domquery的方法，和jquery一样实现了一些selector，基本上支持链式操作。

五、    event类型（9个）
基本上是委派ext.eventmanager的方法。具体可参考事件机制的源码分析文章。

六、    dragdrop类型（3个）
只用了三个方法使元素支持了拖拉操作，原理需研究ext.dd下的源码。

七、    ajax（3个）
调用ext.ajax方面的方法，使元素支持经常使用的ajax更新等方法。

八、    anim（3个）
调用ext.lib.anim的方法，使元素支持常用的一些动画效果。

九、    综合类型（7个）
一些比较高级的方法，会涉及到以上的一两个方面或更多。

附：
1、针对ext.element进行分析的excel表格。
2、一些浏览器解析存在差异的分析文章。
 
http://www.jb51.net/article/11112.htm
scrollWidth
是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。
clientWidth
是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth
是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
一个scrollWidth和clientWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框内输入内容，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。
scrollWidth是对象实际内容的宽度。
clientWidth是对象看到的宽度（不含边线），这个例子里不会改变。
一个clientWidth和offsetWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
offsetWidth的值总是比clientWidth的值大。
clientWidth是对象看到的宽度（不含边线）
offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽）

 
scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
http://www.ntsky.com/tech/web/javascript/2007-05-28/d8e5204123167f2f.html
 
ps：
client可视化区域；
scroll滚动时内容的区域；
offerset元素边缘到边缘之间的距离；

针对width、height这2个概念比较好理解，针对top、left要考虑是相对外层容器的。

由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷，这卷起来的部分就是 scrollTop。scrollLeft 也是类似道理。offsetHeight 是自身元素的宽度，而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。
关于top、clientTop、scrollTop、offsetTop
http://www.webbeast.cn/show-21-1.html

scrollLeft、offsetLeft、clientLeft、clientHeight
http://bbs.blueidea.com/thread-2827853-1-1.html