Extjs的对齐方法alignTo介绍

Extjs的对齐方法alignTo介绍

alignTo( String/HTMLElement/Ext.Element element, [String position], [Number[] offsets], [Boolean/Object animate] ) : Ext.Element
通过指定的锚点将此元素与另一个元素对齐. 如果另一个元素时文档document本身,则对齐到 viewport. 参数 position 是可选的, 并可以指定为以下的格式:

空白: 默认将此元素的左上角(top-left)对齐到目标元素的左下角(bottom-left),即("tl-bl").
一个锚点anchor (此设置已被废弃,deprecated): 传递的锚点位置被用做目标元素的 锚点位置. 此元素将其左上角定位到另一个元素的指定的锚点. 此方法已被废弃,最好使用下面的两个锚点的格式.
两个锚点anchor: 如下面的表格所示,如果参数是用破折号(-)分隔的两个值, 那么第一个值用作此元素的锚点, 而第二个值用作目标元素的锚点(anchor point)
除了锚点, 参数 position 也支持 "?" 字符. 如果问号字符 "?" 出现在position 字符串的末尾, 则元素将试图对齐指定的位置, 如果必要,则会被适当调整以限制在viewport中. 注意: 为了执行 viewport 的限制,被对齐的元素将可能被对齐到其他的位置. 下表是所有支持的锚点位置(anchor positions):

 值      说明
-----  -----------------------------
tl     左上角(top left corner) (默认值)
t      上边界(top edge)的中心
tr     右上角(top right)
l      左边界(left edge)的中心
c      元素的中心(center)
r      右边界(right edge)的中心
bl     左下角(bottom left)
b      下边界(bottom edge)的中心
br     左下角(bottom right)
用法示例:

// 使用默认的对齐位置("tl-bl", 不受限制) 将 el 对齐到 other-el 
el.alignTo("other-el");

// 对齐el元素的左上角到other-el元素的右上角 (受viewport限制)
el.alignTo("other-el", "tr?");

// 对齐el元素的右下角到other-el元素的左边界中心
el.alignTo("other-el", "br-l?");

// 对齐el元素的中心点center到other-el元素的左下角,
// 并调整 x 的位置偏移为 -6 pixels (y 位置偏移为 0)
el.alignTo("other-el", "c-bl", [-6, 0]);

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。