Extjs的对齐方法alignTo介绍
浏览数：35 /
时间：2015年06月09日
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]);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
