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]);
posted on 2015-03-18 11:51 紫色心情 閱讀(3605) 評論(0) 編輯 收藏 所屬分類: JAVA