`

Extjs getEl() 功能

 
阅读更多
Ext.Element API比较多,大伙用的时候也难以在短时间把住它的脉络,主要功能。这个给个总结,而不是一个API说明。说到API说明,网上早有大侠做得蛮不错的了。
位置设置:
getX()   取得相对于页面的x坐标
getY()   取得相对于页面的y坐标
getXY() 取得相对于页面的x,y坐标,用法:ele.getXY()[0]/[1]
getOffsetsTo(el)  取得相对元素el的坐标,返回值[x,y]
setX(x,animate)   设相对于页面的x坐标,animate为true则开启默认动画效果
setY(y,animate)  同上
setLeft(left)   设style.left
setTop(top)    设style.top
setRight(right)  设style.right
setBottom(bottom) 设style.bottom
setXY(pos,animate) 设相对于页面的x,y,相当于setX,setY。用法:setXY([x,y],true)
setLocation(x,y,animate) 相当于setXY。
getRegion()        return {top=t,left=l,width=w,height=r}
getHeight(true|false)    true不包括边框、内边距,false包括
getBorderWidth(anthor)
getPadding(anthor)
getComputedHeight()  包括边框、内边距
getComputedWidth()
getSize()   相当于getWidth、getHeight   {width:w,height:h}
getStyleSize()   取style.width、style.height,且不包括边框{width:w,height:h}
getViewSize()    取视口大小{width:w,height:h}
getValue()     如果有value属必就取它
setWidth(width,animate)     设style.width
setHeight(height,animate)    设style.height
setSize(width,height,animate)
setBounds(x,y,width,height,animate)   相当于setSize、setXY
setRegion(region,animate)      相当于setBounds
getScroll()            取得当前视口在文档中水平、垂直方向上的偏移,返回{left:l,top:t}
setOpacity(opacity,animate)
getLeft(local)    false相当于getX,true相当于style.left
getRight(local)   false相当于getX+getWidth,true相当于getLeft(true)+getWidth()
getTop(local)   false相当于getY,true相当于style.top
getBottom(local)
position(pos,zIndex,x,y)  string:pos,取static,relative,absolute,fixed
                          zIndex设z序,x,y用来调用setXY的
clearPositionsing(value)  作用非得看代码
    clearPositioning : function(value){
        value = value ||'';
        this.setStyle({
            "left": value,
            "right": value,
            "top": value,
            "bottom": value,
            "z-index": "",
            "position" : "static"
        });
        return this;
    }
getPositioning()  取值格式如上{……}
setPositioning(pc)  用法同applyStyles
setLeftTop(left,top)  就是设style.left,style.top

moveTo(x,y,animate)    相当于setXY
move(direction,distance,animate)   很有用,direction移动方向,取t,l,r,b。
                    distance是移动的距离,animate是否启用动画效果
getAnchorXY(anchor,local,s)   取得对齐到某处的页面x,y坐标
getCenterXY()          取得对齐到视口中央的页面x,y坐标
getAlignToXY(el,p,o)       取得对齐到某元素某处的页面x,y坐标
alignTo(element,position,offsets,animate)  对齐到元素的某处,允许偏移、动画
anchorTo(el,alignment,offsets,animate,monitorScroll,callback)  对齐到元素

center(centerIn)   对齐到视口中央
getBox(contentBox,local)  contentBox=false包括边框、内边距 local=false获取页面坐标
setBox(box,adjust,animate)   box包括边框、内边距
getFrameWidth(sides,onlycontentBox)
repaint()    强制刷新元素


关于样式、属性设置
addClass(String/Array className )
removeClass(String/Array className)
replaceClass(String oldClassName, String newClassName )
radioClass(String/Array className )
toggleClass(String className )
setStyle(name,value)
getStyle(name)
hasClass(className)
addClassOnClick(classname)
addClassOnFocus(classname)
addClassOnOver(classname)
hover(classsname,bool preventFlicker)
页点操作:
append(ele)
appendTo(ele)
replace(ele)
replaceWith(ele)
insertBefore(ele)
insertAfter(ele)
insertFirst(ele)
insertHtml(where,html,returnEl)
insertSibling(el,where,returnDom)
remove()
createChild(config,HTMLElement insertbefore,returndom)

first(selector,returndom)
last(selector,returndom)
next(selector,returndom)
prev(selector,returndom)
parent(selector,returndom)
child(selector,returndom)
up(selector,maxdepth)
down(selector,maxdepth)
query(selector)
contains(HTMLElement/string el)
show(animate)
hide(animate)
toggle(animate)
setVisible(boolean visible,animate)

update(html, loadScripts, callback)
特殊的
hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element
mask(msg, msgCls)
unmask()
load( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] )
focus()
blur()

事件注册:
on(eventname,fun)
un(eventname,fun)
addListenser/removeListenser/removeAllListeners
分享到:
评论

相关推荐

    EXtjs 图片批量上传

    本教程将深入探讨如何在ExtJS中实现图片的批量上传功能,以及与之相关的批量删除操作。 首先,批量上传图片的核心是利用HTML5的File API,它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...

    extjs+dwr3.0实现文件上传

    在“EXTJS+DWR3.0实现文件上传”这个主题中,我们将探讨如何结合这两者来实现一个高效且用户友好的文件上传功能。在实际的Web应用中,文件上传是一个常见的需求,例如在社交媒体平台上传图片、在文档分享网站上传...

    EXTJS4.2浮动侧边框

    本文将详细介绍如何在EXTJS4.2中实现一个可跟随鼠标移动显示或隐藏的浮动侧边框功能,类似QQ主界面右侧的功能栏。 #### 技术背景 EXTJS是一款基于MVC架构模式的前端框架,它提供了一套完整的解决方案用于构建复杂...

    EXTjs 文件上传(可用)

    本文将深入探讨如何使用EXTjs进行文件上传,并结合Strut2实现这一功能。 首先,EXTjs 提供了`Ext.form.FileField`组件,用于在表单中创建文件选择字段。这个组件允许用户选择本地文件,然后通过AJAX方式提交到...

    ExtJs查看图片控件,并且图片可以拖动例子.docx

    通过此案例的学习,你可以了解到如何在 ExtJs 中使用自定义组件以及如何利用 ExtJs 的事件处理机制来实现交互式功能。 #### 三、关键技术点 ##### 3.1 图片显示与自定义组件 为了实现图片显示功能,首先需要创建一...

    学习ExtJS Panel常用方法

    ### ExtJS Panel 常用方法详解 ...通过合理利用这些功能,开发者可以更加灵活地创建和管理用户界面。需要注意的是,在实际开发过程中,还需要根据项目需求选择合适的 xtype 和方法组合,以实现最佳的用户体验。

    ext中播放声音

    在EXTJS这个强大的JavaScript框架中,实现音频播放功能是一项常见的需求。EXTJS提供了一种灵活的方式,通过结合HTML5的Audio API,可以在Web应用中轻松地播放、控制声音。本篇将详细介绍如何在EXTJS中播放声音,并...

    ext上传文件例子文章

    在EXTJS中,文件上传功能是常见的需求之一,尤其在处理用户需要提交本地文件的场景下。本篇文章将深入探讨EXTJS中的文件上传实现方式。 首先,EXTJS 提供了`Ext.form.Basic`和`Ext.form.FieldSet`等组件,它们可以...

    ext3.3正式版发布

    压缩包中的"ExtJS实用开发指南.pdf"文件,虽然与EXT3.3文件系统看似无关,但实际上可能是一个关于Ext JS的编程指南。Ext JS是一个基于JavaScript的富客户端应用框架,主要用于构建Web应用程序的用户界面。这个PDF...

    Ext智能提示的操作文件以及使用说明

    在ExtJS中,你可以通过创建一个`Ext.tip.ToolTip`实例来实现这个功能。Tooltips不仅可以显示静态文本,还可以包含HTML内容,甚至可以是动态生成的。 2. **创建Tooltips** 创建一个基本的Tooltips,你需要配置一个...

    Ext JS Grid在IE6 下宽度的问题解决方法

    } 2、在grid中加入下面代码: 代码如下:monitorResize: true, doLayout: function() { this.setSize(Ext.get(this.getEl().dom[removed]).getSize(true)); Ext.grid.GridPanel.prototype.doLayout.call(this

    去掉gridPanel表头全选框的小例子

    给gridpanel 加上listener即可 代码如下:,listeners:{render:function(){var hd_checker = this.getEl().select(‘div.x-grid3-hd-checker’);if (hd_checker.hasClass(‘x-grid3-hd-checker’)) { hd_checker....

Global site tag (gtag.js) - Google Analytics