解析 Ext.Element.setXY()

用于将元素定位到指定的页面绝对坐标处。深刻理解relative,absolute 的区别 ，与 offsetParent 的关系

 

setXY ( Array pos , [Boolean/Object animate ]  ) : Ext.Element

Sets the position of the element in page coordinates, regardless of how the element is positioned. The element must b...

Sets the position of the element in page coordinates, regardless of how the element is positioned. The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).

Parameters:

• pos : Array
  Contains X & Y [x, y] values for new position (coordinates are page-based)
• animate : Boolean/Object
  (optional) True for the default animation, or a standard Element animation config object

Returns:

• Ext.Element
  this

setXY: function (el, xy) {
    el = Ext.fly(el, '_setXY');
    // 如果当前元素没有被定位， 将当前元素  相对定位(relative)，这样才能用 top left 移动才元素
    //这一句后，当前元素只能为 relative 或者 absolute (fixed 暂不考虑)
    el.position();
    //主要函数，
    //如果当前元素为 absolute 得到当前元素相对于它已定位父亲的 top left 值
    //如果当前元素为 relative 得到和当前元素位置的偏移量，与它已定位父亲无关
    var pts = el.translatePoints(xy);
    //根据得到的值，设置
    if (xy[0] !== false) {
        el.dom.style.left = pts.left + "px";
    }
    if (xy[1] !== false) {
        el.dom.style.top = pts.top + "px";
    }
}

 

重点就是  translatePoints

原理：

1.当前元素定位relative ：得到和现在位置的差值即可，就是相对定位的定义。

2.当前元素为 absolute，根据绝对定位的定义，需要得到当前元素相对于它已定位父亲的 top left 值

translatePoints: function (x, y) {
    if (typeof x == 'object' || Ext.isArray(x)) {
        y = x[1];
        x = x[0];
    }
    var p = this.getStyle('position');
    //得到 未移动前 元素在页面上的绝对坐标
    var o = this.getXY();
    //对于绝对定位 ：得到相对于已定位父亲的 差值
    //对于相对定位：取得该元素原先的偏移量
    // ff 若没有 手动 设置 则返回 当前计算得到的数值
    //ie 若没有手动设置 ，则返回 auto
    var l = parseInt(this.getStyle('left'), 10);
    var t = parseInt(this.getStyle('top'), 10);
    //如果 没有设置 ，
    //对于 绝对定位需要得到和已定位祖先的差值，则取  this.dom.offsetLeft
    //对于相对定位 则证明和原先位置无偏移，取0，为了下面计算公式统一
    if (isNaN(l)) {
        l = (p == "relative") ? 0 : this.dom.offsetLeft;
    }
    if (isNaN(t)) {
        t = (p == "relative") ? 0 : this.dom.offsetTop;
    }
    //对于绝对定位：o[0]-l 为 已定位的父亲节点 的 页面绝对坐标, x-(o[0]-l) 即为 相对于 已定位的父亲节点 的 相对坐标
    //对于相对定位 :o[0]-l 为 当前元素没有偏移时的位置,x-(o[0]-l) 是 为了使元素达到 x,y绝对坐标 ，需要偏移原来位置的数值
    return {
        left: (x - o[0] + l),
        top: (y - o[1] + t)
    };
}

 

于是就实现了将元素移到了指定的页面绝对坐标。

1.对于当前元素没有定位的情况(首先设置为相对定位)或相对定位的情况：

就是要计算出要达到的目的位置和当前位置的差值，然后设置left top css

2.对于当前元素绝对定位的情况：

实际上 就是设置了合适的 相对于 他已定位父亲元素的 left top css值

注意 ：

top left 只有在 postion 为 relative absolute 是才起作用，且都是相对于它的祖先节点（postion 为 relative absolute的祖先节点），偏移 top left 的。

注意2：

此方法当绝对定位元素没有设置初始left，top时，ie下会有bug ：

Ext.Element.setXY 使用注意 bug in IE ？