`
liss
  • 浏览: 844065 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

extJs 2.0学习笔记(Ext.Element API总结)

阅读更多

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

 

  在上面,我把Ext.Element的所有API进行分类,平常要完成什么功能,一查即知,而且,我这儿给出那些只有细微差别的API的不同之处。让人一看即知,当然,如果对最基础的API都有疑问,这儿有一篇好文章,可以补此不足,点此处访问它。

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/huoyanxueren/archive/2008/07/16/2662798.aspx

分享到:
评论

相关推荐

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 ...25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77

    extjs 学习笔记(二) Ext.Element类

    本篇学习笔记将深入探讨`Ext.Element`类,包括`Ext.fly`和`Ext.get`的区别以及如何使用`Ext.Element`进行各种DOM操作。 首先,`Ext.fly` 和 `Ext.get` 都是用来获取`Ext.Element`对象的方法,但它们之间存在一些...

    Ext 学习总结 pdf版

    - **ExtJs2.0学习笔记(Element.js篇/DomHelper.js篇/ext.js篇)**:分别介绍了这三个核心文件中提供的功能和方法。 综上所述,文档涵盖了Ext JS框架的核心知识点,从基本概念到具体应用都有详细的阐述,这对于初学者...

    Ext API详解--笔记

    在`EXT核心API详解(三)-Ext.Element.txt`中,你将了解到如何选择元素、添加和移除CSS类、处理事件、动画效果以及布局调整。 2. **Array, Date, Function, Number, String**: 在`EXT核心API详解(二)-Array Date ...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    Extjs学习笔记有用

    `Ext.get` 是 ExtJS 中获取页面元素的重要方法,它是 `Ext.Element.get` 的别名。此方法接受一个参数,可以是元素的ID、DOM节点或者已经存在的 `Ext.Element` 对象。它返回一个 `Ext.Element` 对象,这个对象提供了...

    ExtJS使用笔记

    Ext.Element是ExtJS的心脏,它扩展了原生的DOM元素,增加了动画、尺寸调整、位置控制等功能。Ext.Template和Ext.XTemplate是用于处理模板的类,能够实现内容的动态插入和渲染。通过模板可以快速定义数据的展示方式,...

    EXT_JS实用开发指南_个人整理笔记.docx

    - **底层API(core)**:这是EXT_JS的基础,包含DOM操作、事件处理、DOM查询等功能,例如`DomHelper.js`和`Element.js`。 - **控件(widgets)**:提供各种可视化组件,如面板、表格、树、窗口等,它们构建在底层...

    extjs4笔记PDF版本,带目录

    - **元素获取**:ExtJS提供了一种简便的方式来获取页面上的元素,如`Ext.get('myDiv')`,返回的是一个Element对象,可以进行进一步的操作。 通过实践和深入研究这些核心概念,你将逐步掌握ExtJS4,从而能够开发出...

Global site tag (gtag.js) - Google Analytics