Ext定位问题

通过Ext Core的定位API,可方便实现跨浏览器的获取或设置元素的位置。类似尺寸API,可在方法中加入动画效果。下面开始简单介绍这22个方法的使用方法。

getX:获取元素基于页面坐标的X轴位置。元素只有在DOM树下才可以获取坐标值,如果display属性为none或还没插入DOM树,则返回false。其使用方法请看下面的代码。

 
  1. var x=Ext.fly('elId').getX(); 

getY:获取元素基于页面坐标的Y轴位置。与getX方法一样,元素只有在DOM树下才可以获取坐标值。其使用方法请参考getX方法。

getXY:获取元素基于页面坐标的坐标值,返回值为数组。该方法与getX方法一样,元素只有在DOM树下才可以获取坐标值。其使用方法请参考getX方法。

setX:设置元素X坐标。该方法与getX方法一样,元素只有在DOM树下才可以设置。其使用方法请看下面代码。

 
  1. Ext.fly('elId').setX(10); 

setY:设置元素Y坐标。该方法与getX方法一样,元素只有在DOM树下才可以设置坐标值。其使用方法请参考setX方法。

setXY:设置元素坐标。该方法与getX方法一样,元素只有在DOM树下才可以设置坐标值。其使用方法请看下面代码。

 
  1. Ext.fly('elId').setXY([10,10]); 

getOffsetsTo:返回元素相对于另一元素的间距。该方法返回的是数组值。该方法与getX方法一样,元素只有在DOM树下才可以设置坐标值。其使用方法请看下面代码。

 
  1. var offset = Ext.fly('elId').getOffsetsTo(Ext.fly('elId1')); 

getLeft:返回元素左边的X坐标。如果设置参数为true,则返回基于css定义的坐标值,而不是基于页面的坐标值。其使用方法请看下面代码。

 
  1. var x = Ext.fly('elId').getLeft(); 

getRight:返回元素右边的X坐标,实际值为元素的X坐标加上元素宽度。与getleft方法一样,设置参数为true则返回基于css定义的坐标值。其使用方法可参考getLeft方法。

getTop:返回元素顶部的Y坐标。与getleft方法一样,设置参数为true则返回基于css定义的坐标值。其使用方法可参考getLeft方法。

getBottom:返回元素底部的Y坐标,实际值为元素Y坐标加上元素高度。与getleft方法一样,设置参数为true则返回基于css定义的坐标值。其使用方法可参考getLeft方法。

setLeft:设置元素样式left属性的值。其使用方法请看下面代码。

 
  1. Ext.fly('elId').setLeft(100); 

setRight:设置元素样式right属性的值。其使用方法请参考setLeft方法。

setTop:设置元素样式top属性的值。其使用方法请参考setLeft方法。

setBottom:设置元素样式bottom属性的值。其使用方法请参考setLeft方法。

setLocation:设置元素基于页面坐标的坐标值。其使用方法请看下面代码。

Ext.fly('elId').setLocation(100,200);

moveTo:设置元素基于页面坐标的坐标值。该方法可设置位置改变时是否使用动画。其使用方法请看下面代码。

 
  1. Ext.fly('elId').moveTo(100,200);  
  2. //使用默认动画  
  3. Ext.fly('elId').moveTo(100,200,true);  
  4. //使用自定义动画  
  5. Ext.fly('elId').moveTo(100,200,{  
  6.   duration :.5 //动画的持续时间  
  7.   callback :function(){//处理} //动画结束回调函数  
  8. }); 

position:预置元素的position属性。如果没有设置position属性,该方法会设置position属性为"relative"。其使用方法请看下面代码。

 
  1. //设置为relative  
  2. Ext.fly('elId').position('relative');  
  3. //设置为absolute,z-Index为1000,x坐标为100,坐标为200  
  4. Ext.fly('elId').position('absolute',1000,100,200); 

clearPositioning:当文档已经加载完成,将元素position属性并设置回默认值。其使用方法请看下面代码。

 
  1. Ext.fly('elId').cearPositioning();  
  2. Ext.fly('elId').cearPositioning('top'); 

getPositioning:获取元素的position属性。通常与setPostitioning方法一起使用,在更新元素后用来恢复设置。其使用方法请看下面代码。

 
  1. var pos=Ext.fly('elId').getPositioning(); 

setPositioning:设置元素position属性。其使用方法请看下面代码。

 
  1. Ext.fly('elId').setPositioning({  
  2.   left: 'static',  
  3.  
  4.   right: 'auto' 
  5. }); 

translatePoints:修改元素的left属性值和top属性。其使用方法请看下面代码。

 
  1. Ext.fly('elId').translatePoints([100,200]);  
  2. Ext.fly('elId').translatePoints(100,200); 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值