`

Ext定位问题

    博客分类:
  • 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); 
分享到:
评论

相关推荐

    EXT3文件系统下的手工定位文件 .docx

    通过以上步骤,我们可以手动定位EXT3文件系统中的文件。首先找到超级块,然后确定块大小和块组信息,接着通过组描述符表找到根目录的i节点,进一步遍历i节点表找到目标文件的i节点,最后根据i节点中的块指针读取数据...

    ext3手工定位文件

    手工定位Ext3分区下的文件,并提取出相应的文件,本资料为视频文件,请下载两个文件后解压

    ext4-exactor.zip

    4. **故障排查**:在系统出现问题时,EXT4-extractor可以帮助开发者定位问题,例如检查文件系统的完整性,查找错误的文件分配等。 使用EXT4-extractor时,你需要一个EXT4格式的磁盘映像文件,这通常可以通过在...

    ie9不支持ext对象的问题

    使用开发工具检查控制台错误和警告,可以帮助定位并解决潜在的兼容性问题。 总的来说,虽然IE9在处理复杂JavaScript框架时存在局限,但通过采用适当的策略和技术,如使用polyfills、选择合适的Ext JS版本、正确配置...

    Ext框架结构 Ext目录结构

    Ext框架是基于JavaScript的UI库,它为Web应用程序提供了丰富的组件和交互效果。在深入探讨Ext框架结构之前,...在实际开发过程中,结合类结构图和目录结构,可以更快地定位到所需的功能或修复问题,从而提升开发效率。

    不错的ext日志管理系统

    3. **日志搜索与过滤**:EXT提供强大的搜索功能,允许用户通过关键词、时间范围、来源等条件快速定位到特定的日志条目。同时,过滤功能可以帮助用户筛选出关注的信息,减少分析噪音。 4. **实时监控**:EXT具有实时...

    EXT IDE,方便的EXT开发工具

    4. **调试工具**:内置的调试器使开发者能够设置断点、查看变量值、单步执行代码,以定位并解决问题。这对于调试复杂的EXT应用至关重要。 5. **模板和示例**:IDE通常会提供各种EXT组件和布局的预设模板,帮助...

    手工定位Ext3分区文件

    本主题聚焦于如何手工定位Ext3分区中的文件并进行提取,这对于数据恢复、故障排查或者系统管理员来说是一项重要的技能。 首先,理解Ext3文件系统的结构是必要的。Ext3将硬盘空间划分为不同的区域,包括超级块...

    ext4magic源代码

    这意味着`ext4magic`可能已经经过了多次改进和优化,但依然可能包含一些未解决的问题或者待完善的特性。 在使用`ext4magic`进行数据恢复时,用户需要对Linux系统有一定的了解,并且必须谨慎操作,以免进一步破坏已...

    Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2

    它包含了一个完整的索引和搜索功能,使开发者能够快速定位到所需的API信息。 总的来说,Ext JS 2.2 API的中文版是开发人员学习和使用此框架的宝贵资源,可以帮助他们更高效地开发出功能强大的Web应用。通过深入理解...

    Ext core 3.1.0的一个大Bug

    而“ext-core-debug.js”可能是Ext JS的调试版本,包含了更详细的错误信息,这对于调试和定位问题非常有帮助。 在实际的开发场景中,遇到这样的问题,开发者通常会: 1. 首先,阅读博客文章以获取Bug的详细信息和...

    Ext JS高级程序设计

    这部分可能还涵盖了一些最佳实践和调试技巧,以帮助开发者解决在项目中遇到的问题。 附带的文档如“目录.doc”提供了全书的详细结构,帮助读者快速定位所需信息;“前言.doc”通常包含了作者的写作背景和目的,以及...

    Ext4.0调试工具

    这些工具能够帮助开发者深入理解代码运行过程,定位并修复潜在问题,提高应用性能。在本文中,我们将详细探讨Ext4.0调试工具的几个关键组件及其功能,以及如何使用它们来提升开发效率。 1. **ext-4.0.0.jsb2**: ...

    ext TreeFilter ext 写的快速检索

    这种特性使得用户即使不清楚完整关键词也能快速定位目标。 在实现TreeFilter时,EXT JS提供了多种配置选项。开发者可以根据需求定制过滤行为,比如设置过滤模式(全局或局部),决定是否忽略大小写,以及如何处理...

    EXT.form组件

    3. `combo`:`Ext.form.ComboBox`是下拉列表框组件,允许用户在预设的选项中进行选择,同时可以提供搜索功能以便快速定位选项。 4. `datefield`:`Ext.form.DateField`是日期选择组件,用户可以通过日历控件选择...

    ext4文件恢复

    ### ext4文件恢复知识点 #### 一、Ext4文件系统简介 Ext4是Linux系统中常用的文件系统之一,它是Ext3文件系统的改进版本,主要针对性能优化和稳定性增强进行了改进。Ext4支持更大的文件和卷大小,提高了磁盘空间...

    Ext用户UI界面优秀框架

    在标签中提到了"jquery",虽然Ext JS 和 jQuery 都是JavaScript库,但它们的定位不同。jQuery 主要是简化DOM操作、事件处理和动画效果,而Ext JS 更侧重于构建复杂的用户界面和应用结构。它们可以结合使用,例如利用...

    EXT 图标大全 16x16 常用图标

    设计者可以根据标签“EXT”和“6x16”快速定位并使用这些图标,为他们的项目增添专业和美观的元素。在解压后的文件名称列表"EXT ICON"中,可能包含了各种图标的具体文件,用户可以逐一查看并选择使用。

    ext.jsb3文件下载

    同时,IDE的调试功能也能帮助开发者快速定位和修复问题,从而提高软件的稳定性和可靠性。 总之,EXT.JSB3是EXT JS开发中一个关键的辅助工具,特别是在集成到MyEclipse这样的IDE中,可以显著提升开发效率和代码质量...

Global site tag (gtag.js) - Google Analytics