EXT核心API详解(一) - Ext类
Ext类
addBehaviors( Object obj ) : void
对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如
addBehaviors({
// id=foo下所有的a标签加入click事件
'#foo a@click' : function(e, t){
// do something
},
// 用,分隔多个选择器
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
apply( Object obj, Object config, Object defaults ) : Object
从config拷贝所有的属性到obj,如果有defaults参数,也将拷贝其属性到obj
applyIf( Object obj, Object config ) : Object
从config拷贝所有属性至obj(如果obj未定义相应属性)
decode(Object obj) : String
编码一个对象/数组或其它值为一个json格式字符串(支持对象,数组,日期,字符串)
destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void
尝试去移除每个传入的对象,包括DOM,事件侦听者,并呼叫他们的destroy方法(如果存在)
each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
利用array中的每个元素迭代调用fn.直到fn返回假,调用格式fn.call(scope || array[i], array[i], i, array);
encode(String json) : Object
将一个json格式字符串反序列化为对象
escapeRe( String str ) : String
为字符串正则编码将.在*+?^${}()|[]/\字符前加\
extend( Object subclass, Object superclass, [Object overrides] ) : void
从superclass类继承subclass,overrides参数是要重载的方法列表,详见override
fly( String/HTMLElement el, [String named] ) : Element
得到全局共享的一个浮动元素el,如果有多个浮动元素可以使用命名以避免潜在的冲突
get( Mixed el ) : Element
得到一个Element对象,参数可以是id或DOM节点或已存在的Element对象
getBody() : Element
得到当前文档的body对象
getCmp( String id ) : Component
通过id得到一个Component对象
getDoc() : Element
得到当前文档
getDom( Mixed el ) : HTMLElement
通过id或节点或Element对象返回一个DOM节点
id( [Mixed el], [String prefix] ) : String
为对象el生成一个惟一id,如果对象本身已有id,将不会被改变(可以使用前导符prefix)
isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean
判断值是否为空,null, undefined或空字符串将返回真,如果allowBlank定义为真,空字符串将不被视为空
namespace( String namespace1, String namespace2, String etc ) : void
创建一个命名空间,例
Ext.namespace('Company', 'Company.data');
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
num( Mixed value, Number defaultValue ) : Number
将value转为数值,如果value不是合法的数值类型,将返回defaultValue,其实defaultValue并不一定要求是数值类型,只要你愿意
onReady( Function fn, Object scope, boolean override ) : void
当文档准备好了之后引发fn,发生在page的onload事件之前,并且图片此时都还没有载入,scope定义执有者,override定义scope是否有默认的选择
override( Object origclass, Object overrides ) : void
利用overrides重写origclass的方法,例
Ext.override(MyClass, {
newMethod1: function(){
// etc.
},
newMethod2: function(foo){
// etc.
}
});
query( String path, [Node root] ) : Array
通过path,在root中选择节点数组,path可以是以下四种选择器之一
[元素选择器] 例:
* 任意节点
E 一个E标签元素
E F 祖先节点为E的F节点
E > F 或 E/F 父节点为E的F节点
E + F 前一个兄弟节点为E的F节点
E ~ F 前面的兄弟节点中有E的F节点
[属性选择器] 例:
E[foo] 有foo属性的E节点
E[foo=bar] 有foo属性值为bar的E节点
E[foo^=bar] foo属性以bar开始的E节点
E[foo$=bar] foo属性以bar结尾的E节点
E[foo*=bar] foo属性中有bar字符串的E节点
E[foo%=2] foo属性能被2整除的E节点
E[foo!=bar] foo属性值不为bar的E节点
[伪类选择器] 例:
E:first-child E节点是父节点中第一个子节点
E:last-child E节点是父节点中最后一个子节点
E:nth-child(n) E是父节点中每n个节点
E:nth-child(odd) E是父节点中的奇数节点
E:nth-child(even) E是父节点中的偶数节点
E:only-child E是父节点中惟一的子节点
E:checked checked属性为真的节点
E:first 子孙节点中的第一个E节点
E:last 子孙节点中的最后一个E节点
E:nth(n) 子孙节点中的第n个E节点
E:odd E:nth-child(odd)的简写
E:even E:nth-child(even)的简写
E:contains(foo) innerHTML属性中含有foo的E节点
E:nodeValue(foo) E节点中包含一个值为foo的文本节点
E:not(S) 不匹配简单选择器S的E节点
E:has(S) 有能匹配简单选择器S的子节点的E节点
E:next(S) 下一个兄弟节匹配简单选择器S的E节点
E:prev(S) 前一个兄弟节匹配简单选择器S的E节点
type( Mixed object ) : String
判断对象类型,如果不是下列值之一将返回false
[样式选择器] 例:
E{display=none} display属性值为none的E节点
E{display^=none} display属性值以none开始的E节点
E{display$=none} display属性值以none结束的E节点
E{display*=none} display属性值含有none子字串的E节点
E{display%=2} display属性值能被2整除的E节点
E{display!=none} display属性值不等于none的E节点
select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) :CompositeElementLite/CompositeElement
在root内通过样式选择器或元素数组selector选择元素或元素列表,unique指示是否只选择惟一值
urlDecode( String string, [Boolean overwrite] ) : Object
将url格式字符串string解码为json对象,overwrite参数指示是否不重写已存在的对象,例
Ext.urlDecode("foo=1&bar=2"); //返回 {foo: 1, bar: 2}
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4"); //返回 {foo: 1, bar: 4}.
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true); //返回 {foo: 1, bar: [2, 3, 4]}.
urlEncode( Object o ) : String
将json对象编码为url格式字符串,参见urlDecode
type( Mixed object ) : String
得到object类型,如果不为以下列举值之一则返回false
string/number/boolean/function/object/array/regexp/element/nodelist/textnode/whitespace
EXT核心API详解(二)-Array/Date/Function/Number/String
Array类
indexOf( Object o ) : Number
object是否在数组中,找不到返回-1;找到返回位置
remove( Object o ) : Array
从数组中删除指定的对象object,如果找不到object则数组无变化
Number类
constrain( Number min, Number max ) : Number
检查数值是否介于min与max之间, 如果大于max 返回max,如果小于min返回min, 否则返回当前值
String类
escape( String string ) : String
将string中的'和\替换为\' \\
format( String string, String value1, String value2 ) : String
格式化字符串,例:
var cls = 'my-class', text = 'Some text';
var s = String.format('<div class="{0}">{1}</div>', cls, text);// 结果 <div class="my-class">Some text</div>
leftPad( String string, Number size, [String char] ) : String
以char将string补齐为size长度,char默认定义空格
toggle( String value, String other ) : String
交换值,如果当前值等于value,则被赋值other,反之等于value,例:
sort = sort.toggle('ASC', 'DESC');
trim() : String
去除开头或结尾多余的空格
Date类
Date.parseDate( String input, String format ) : Date
将字符串string依指定的格式format转换为时间,其中格式定义详见format方法
例:dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d h:i:s A" );
add( String interval, Number value ) : Date
增加时间段,String interval在Data类中已定义
Date.MILLI = "ms";
Date.SECOND = "s";
Date.MINUTE = "mi";
Date.HOUR = "h";
Date.DAY = "d";
Date.MONTH = "mo";
Date.YEAR = "y";
例var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
between( Date start, Date end ) : Boolean
是否在两个指定的时间之间
clearTime( Boolean clone ) : Date
清除时间信息,如果clone为真,则克隆自已并返回新Date,本身的值并不改变,反之则修改自身的值
clone() : Date
克隆
format( String format ) : String
格式化时间
d 两位数的日期 01 至 31
D 三字母的星期名 Mon 至 Sun
j 一位数的日期 1 至 31
l 完整的星期名 Sunday 至 Saturday
S 日期的英文顺序刻词尾,两个字符 st, nd, rd or th.
w 一周中的第几天 0 (星期天) 至 6 (星期六)
z 一年中的第几天 0 至 364 (闰年365 )
W ISO-8601 星期数, 周一算一个星期的开始 1 至 53
F 月的完整英文名 January 至 December
m 月,以0前导 01 至 12
M 三字母的简写月名 Jan 至 Dec
n 月 1 至 12
t 本月有多少天 28 至 31
L 是否闰年 1/0
Y 完整的年份 例: 1999 或 2003
y 年的后两位 例: 99 或 03
a 上午/下午小写 am 或 pm
A 上午/下午大写 AM 或 PM
g 小时/12小时制 1 至 12
G 小时/24小时制 0 至 23
h 小时/12小时制 01 至 12
H 小时/24小时制 00 至 23
i 分钟 00 至 59
s 秒 00 至 59
u 毫秒 001 至 999
O 时区,与格林威治标准时间之差 例: +0200
T 时区简写 例: EST, MDT ...
Z 时区间距 -43200 至 50400
其中Date类内置了几种格式
Date.patterns = {
ISO8601Long:"Y-m-d H:i:s",
ISO8601Short:"Y-m-d",
ShortDate: "n/j/Y",
LongDate: "l, F d, Y",
FullDateTime: "l, F d, Y g:i:s A",
MonthDay: "F d",
ShortTime: "g:i A",
LongTime: "g:i:s A",
SortableDateTime: "Y-m-d\\TH:i:s",
UniversalSortableDateTime: "Y-m-d H:i:sO",
YearMonth: "F, Y"
};
当然ISO8601Long和ISO8601Short还是非常招人喜欢的
例:
dt.format(Date.patterns.ISO8601Long);
dt.format('Y-m-d H:i:s');
getDayOfYear() : Number
一年中的第几天,从0开始
getDaysInMonth() : Number
本月有多少天,
getElapsed( [Date date] ) : Number
当前日期对象与date之间相差的毫秒数
getFirstDateOfMonth() : Date
本月的第一天
getFirstDayOfMonth() : Number
本月第一天是星期几
getGMTOffset() : String
时区信息(见格式定义中的'O')
getFirstDateOfMonth() : Date
本月最后一天
getFirstDayOfMonth() : Number
本月最后一天是星期几
getSuffix() : String
日期后导符(见格式定义中的S)
getTimezone() : String
时区(见T)
getWeekOfYear() : Number
一年中的第几周(见W)
isLeapYear() : Boolean
是否闰年
Function类
createCallback(/*args...*/) : Function
创建回叫方法
createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] ) :
创建委托
这两个记法除了传参方式不同,看不出有什么差异都是调用method.apply,createCallback可以看作一个简化版的createDelegate
createCallback==>return method.apply(window, args);
createDelegate==>return method.apply(obj || window, callArgs);
前者参数比较简单,直接传过去了,后者的规则比较复杂点,如果appendArgs为真,args将附加在参数列表之后,如果是数值,args将在参数列表的appendargs位置插入,其它情况下原参将不起作用
例:
var fn = func1.createDelegate(scope, [arg1,arg2], true)
//fn(a,b,c) === scope.func1(a,b,c,arg1,arg2);
var fn = func1.createDelegate(scope, [arg1,arg2])
//fn(a,b,c) === scope.func1(arg1,arg2);
var fn = func1.createDelegate(scope, [arg1,arg2], 1)
//fn(a,b,c) === scope.func1(a,arg1,arg2,b,c);
var fn = func1.createCallback(arg1, arg2);
//fn() === func1(arg1, arg2)
createCallback : function(/*args...*/)
createInterceptor( Function fcn, [Object scope] ) : Function
创建阻断方法,如果fcn返回false,原方法将不会被执行
createSequence( Function fcn, [Object scope] ) : Function
创建组合方法,执行原方法+fcn
defer( Number millis, [Object obj], [Array args], [Boolean/Number appendArgs] ):Number
定时执行，隔millis毫秒后执行原方法
EXT核心API详解(三)-Ext.Element
Ext.Element类
Element( String/HTMLElement element, [Boolean forceNew] )
由id或DOM节点创建Element对象
Element.fly( String/HTMLElement el, [String named] ) : Element
由id或DOM节点创建一个全局共享的活动元素,可由named命名以避免可能的冲突
Element.get( Mixed el ) : Element
由id或DOM节点或已存在的Element得到一个Ext.Element对象
addClass( String/Array className ) : Ext.Element
为元素添加一个或多个css类名
addClassOnClick( String className ) : Ext.Element
为点击事件添加和移除css类
addClassOnFocus( String className ) : Ext.Element
为得到和失去焦点添加和移除css类
addClassOnOver( String className, [Boolean preventFlicker] ) : Ext.Element
为鼠标移入移出事件添加和移除css类(该方法未实际使用preventFlicker参数)
addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.KeyMap
为对象添加按键侦听 key由数值或字符串或{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}这样的对象或他们的数组组成
addKeyMap( Object config ) : Ext.KeyMap
功能同addKeyListener,只是传参方式不同
例:
el.addKeyMap({key : "ab",ctrl : true,fn: fn,scope:el });
和
el.addKeyListener({key:"ab",ctrl:true},fn,el);
是等价的,都是在 按下ctral+a或ctrl+b后呼叫fn
addListener( String eventName, Function fn, [Object scope], [Object options] ) : void
定义事件侦听,
eventName:事件名,
fn:事件处理方法,
scrope:范围,
其中options的定义比较复杂,可以包含以下属性
scope {Object} : 处理fn的范围
delegate {String} : 一个简单选择器(过滤目标或寻找目标的子孙节点)
stopEvent {Boolean} : 阻止事件,等于preventDefault+stopPropagation
preventDefault {Boolean} : 阻止默认活动
stopPropagation {Boolean} : 阻止事件冒泡
normalized {Boolean} :设为flase将允许浏览器事件替代Ext.EventObject
delay {Number} : 延时多少毫秒后发生
single {Boolean} : 只运行一次
buffer {Number} : 在Ext.util.DelayedTask中预定事件
当然,还可能自定义参数以传入function
alignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : Ext.Element
将el对齐到element,positon,指示对齐的位置,可选以下定义
tl 左上角(默认)
t 上居中
tr 右上角
l 左边界的中央
c 居中
r 右边界的中央
bl 左下角
b 下居中
br 右下角
position还可以使用?约束移动不能超出窗口
offsets 偏移量,以象素为单位
animate 详见animate定义
例:div1.alignTo('div2','c-bl?',[20,0],true);
采用默认动画将div1的最中央对齐到div2的左下角,并右移20个象素,且不能超出窗口
anchorTo( Mixed element, String position, [Array offsets], [Boolean/Object animate], [Boolean/Number monitorScroll], Function callback ) : Ext.Element
功能和alignTo类似,只是当窗口重定义大小的时候也会引发重对齐事件
monitorScroll参数说明是否需要监视滚动条行为,如果定义为数值则是定义的延时,单位为毫秒,默认是50ms,
callback定义了animate完成后的回叫方法
animate( Object args, [Float duration], [Function onComplete], [String easing], [String animType] ) : Ext.Element
执行动画.
args:目标
duration:时间间隔.默认是0.35
Function:完成后的回叫方法
easing:行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,
以下内容从yahoo ui中找到的
easeNone:匀速
easeIn:开始慢且加速
easeOut:开始快且减速
easeBoth:开始慢且减速
easeInStrong:开始慢且加速,t的四次方
easeOutStrong:开始快且减速,t的四次方
easeBothStrong:开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢体会吧
animType:定义动画类型,默认值run 可选值:color/motion/scroll
appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element
添加子元素el(el须已存在)
appendTo( Mixed el ) : Ext.Element
将当前元素添加到el
applyStyles( String/Object/Function styles ) : Ext.Element
应用样式,styles是"width:100px"这样的字符串或{width:"100px"}这样的对象,function是指返回这样的字串和对象的函数,这是一个没有用的批示,因为任何传参的地方都可以是返回要求类型的function.另见setStyle
autoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : Ext.Element
自适应高度,参数都是老相识了,惟一需要注意的是这个方法使用了setTimeout,高度不会马上变更
blur() : Ext.Element
失去焦点,忽略所有的异常
boxWrap( [String class] ) : Ext.Element
用一个指定样式class的div将当前元素包含起来,class默认值为x-box
center( [Mixed centerIn] ) : void
alignTo的简华版.相当于alignTo(centerIn || document, 'c-c'),当前元素的中心对齐到centerIn元素的中心
child( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element
依selector选择子孙节点,依returnDom不同批示返回html元素还是ext元素,未定义或false时返回Ext.Element
clean( [Boolean forceReclean] ) : void
清除无用的空白文本节点(我喜欢这个想法)
clearOpacity() : Ext.Element
清除当前元素样式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/-khtml-opacity
clearPositioning( [String value] ) : Ext.Element
清除定位,恢复到默认值,相当于
this.setStyle({"left": value,"right": value,"top": value,"bottom": value,"z-index": "","position" : "static"});
clip() : Ext.Element
裁剪溢出部分,用unclip()恢复
contains( HTMLElement/String el ) : Boolean
当前元素中是否存在el
createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.Element
创建一个新的子节点
config :DomHelper元素对象,如果没有特别指明tag,将使用div做默认tag,详情参见DomHelper,如果未定义insertBefore,则追加
createProxy( String/Object config, [String/HTMLElement renderTo], [Boolean matchBox] ) : Ext.Element
创建一个代理元素
config:代理元素的类名或DomHelper config对象
renderTo:将要绘制代理元素的html element或id
matchBox:是否对齐
createShim() : Ext.Element
在当前元素之前创建一个classname为ext-shim的iframe,有什么用?
down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element
通过样式选择器selector选择子孙节点
enableDisplayMode( [String display] ) : Ext.Element
setVisibilityMode的简便方法
findParent( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement
通过简单选择器selector寻找祖先节点 ,直到maxDepth(元素maxDepth默认为10,也可以是指定的DOM 节点),找不到返回null
findParentNode( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement
从父元素开始使用简单选择器selector选择DOM节点
first( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
得到第一个符合selector条件的子节点,跳过文本节点
focus() : Ext.Element
得到焦点
getAlignToXY( Mixed element, String position, [Array offsets] ) : Array
得到当前元素按position规则对齐到element时的XY坐标值 position/offsets参数参见alignTo方法
getAnchorXY( [String anchor], [Object size], [Boolean local] ) : Array
得到当前元素锚点指定的坐标值 anchor定义参见alignTo方法,默认为c
getAttributeNS( String namespace, String name ) : String
得到使用了命名空间namespace的属性name之值,
getBorderWidth( String side ) : Number
得到side指定的边框之和,side可以是t, l, r, b或他们的任意组合,比如getBorderWidth("lr")就是得到左边框和右边框之和
getBottom( Boolean local ) : Number
得到当前元素的底部纵坐标,元素纵坐标+元素高度
getBox( [Boolean contentBox], [Boolean local] ) : Object
得到当前元素的box对象:{x,y,width,height}
getCenterXY() : Array
如果当前元素要居中对齐时的横纵坐标值,等价getAlignToXY(document, 'c-c')
getColor( String attr, String defaultValue, [String prefix] ) : void
得到当前元素指定attr的颜色值,如果没指定,返回defualtValue,比较郁闷的是明明不是void为什么api中批示是一个void?应该是个字符串
getComputedHeight() : Number
得到计算过的高度,得到offsetHeight或css中定义的height值之一,如果使用了padding/borders,也会计算进去
getComputedWidth() : Number
见getComputedHeight
getFrameWidth( String sides ) : Number
得到sides定义的border宽度和padding定义的宽度之和,side定义见getBorderWidth
getHeight( [Boolean contentHeight] ) : Number
返回元素的offsetHeight
getLeft( Boolean local ) : Number
得到横坐标
getMargins( [String sides] ) : Object/Number
如果没有定义sides,则返回一个含有{left,top,width,height}对象,反之返回side指定的宽度,side定义见getBorderWidth
getOffsetsTo( Mixed element ) : Array
计算从element到当前元素的偏移量
getPadding( String side ) : Number
得到由side指定的padding之和
getPositioning() : Object
得到当前元素的位置信息 返回含以下属性的对象{position,left,right,top,bottom,z-index}
getRegion() : Region
得到当前元素的区域信息 返回含有以下属性的Ext.lib.Region对象{top, left, bottom, right}
getRight( Boolean local ) : Number
右边界值
getScroll() : Object
得到一个批示滚动条位置的对象{left, top}
getSize( [Boolean contentSize] ) : Object
得到宽度和高度组成的对象信息{width,height}
getStyle( String property ) : String
得到指定的样式值 getStyles简化版
getStyles( String style1, String style2, String etc. ) : Object
得到由参数组成的对象
例:el.getStyles('color', 'font-size', 'width')
可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}
getTop( Boolean local ) : Number
得到顶点纵坐 标
getUpdater() : Ext.Updater
得到当前元素的Updater对象,参见Ext.Updater类
getValue( Boolean asNumber ) : String/Number
得到value属性的值
getViewSize() : Object
得到clientHeight和clientWidth信息给成的对象{width,height}
getWidth( [Boolean contentWidth] ) : Number
..这样的方法真多
getX() : Number
getXY() : Array
getY() : Array
得到页面偏移量,也就是绝对坐标
hasClass( String className ) : Boolean
样式类className 存在于当前元素的dom 节点中
hide( [Boolean/Object animate] ) : Ext.Element
隐藏当前元素
hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element
设置鼠标移入移出事件
initDD( String group, Object config, Object overrides ) : Ext.dd.DD
initDDProxy( String group, Object config, Object overrides ) : Ext.dd.DDProxy
initDDTarget( String group, Object config, Object overrides ) : Ext.dd.DDTarget
这个要放到 Ext.dd去专门搞了,用于拖曳
insertAfter( Mixed el ) : Ext.Element
insertBefore( Mixed el ) : Ext.Element
insertFirst( Mixed/Object el ) : Ext.Element
在DOM中el元素之前之后...插入当前元素
insertHtml( String where, String html, Boolean returnEl )
插入html内容 where 可选beforeBegin, afterBegin, beforeEnd, afterEnd
insertSibling( Mixed/Object/Array el, [String where], [Boolean returnDom] ) :
插入或创建el做为当前元素的兄弟节点,where可选before/after,默认为before
is( String selector ) : Boolean
验证当前节点是否匹配简单选择器selector
isBorderBox()
测试不同的样式规则以决定当前元素是否使用一个有边框的盒子
isDisplayed() : Boolean
只要不是指定display属性none都会返回真
isMasked() : Boolean
仅有当前元素有mask并且可见时为真,mask译为蒙片?就是有些输入框没得到值之前会有一行模糊的提示的那种东西
isScrollable() : Boolean
可以滚动?
isVisible( [Boolean deep] ) : Boolean
可见?
last( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
见first
load( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : Ext.Element
直接应用当前updater的update方法
mask( [String msg], [String msgCls] ) : Element
为当前对象创建蒙片
move( String direction, Number distance, [Boolean/Object animate] ) : Ext.Element
相前元素相对于当前位置移动,
direction批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down".
distance,指示要移动的距离,以像素为单位
moveTo( Number x, Number y, [Boolean/Object animate] ) : Ext.Element
称动到指定的位置
next( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
下一个符合selector的兄弟节点,
on( String eventName, Function fn, [Object scope], [Object options] ) : void
详见addListener
position( [String pos], [Number zIndex], [Number x], [Number y] ) : void
初始化当前元素的位置 pos可选择relative/absolute/fixed
prev( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement
前一个符合selector的兄弟节点
query( String selector ) : Array
通过样式选择器选择子节点
radioClass( String/Array className ) : Ext.Element
添加样式或样式数组到当前元素，并移除兄弟节点中的指定样式
relayEvent( String eventName, Object object ) : void
将当前元素的eventName事件同时转发给object对象
remove() : void
从当前DOM中删除元素,并从缓存中移除
removeAllListeners() : Ext.Element
移除所有的侦听者
removeClass( String/Array className ) : Ext.Element
移除样式类
removeListener( String eventName, Function fn ) : Ext.Element
移除事件eventName的fn侦听器
repaint() : Ext.Element
强制浏览器重绘当前元素
replace( Mixed el ) : Ext.Element
用当前元素替换el
replaceClass( String oldClassName, String newClassName ) : Ext.Element
替换样式类
replaceWith( Mixed/Object el ) : Ext.Element
用el替换当前元素
scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean
滚动,scroll会保证元素不会越界,direction和distance参数见move
scrollIntoView( [Mixed container], [Boolean hscroll] ) : Ext.Element
滚动到container内的视图
scrollTo( String side, Number value, [Boolean/Object animate] ) : Element
基本与scroll方法相同,但不保证元素不越界
select( String selector, [Boolean unique] ) :
与query不同的是,通过样式选择器selector,select方法会返回一个复合元素对象(CompositeElement)或CompositeElementLite,
set( Object o, [Boolean useSet] ) : Ext.Element
设置属性，例
el.set({width:'200px',height:'200px'});
setBottom( String bottom ) : Ext.Element
setLeft( String left ) : Ext.Element
setRight( String right ) : Ext.Element
setTop( String top ) : Ext.Element
setLeftTop( String left, String top ) : Ext.Element
设置css 对象的属性值
setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element
马上改变当前元素的位置和尺寸
setBox( Object box, [Boolean adjust], [Boolean/Object animate] ) : Ext.Element
为当前元素设置一个盒子box:{x, y, width, height},adjust指示是否马上调整尺寸
setDisplayed( Boolean value ) : Ext.Element
设置可见性
setHeight( Number height, [Boolean/Object animate] ) : Ext.Element
setWidth( Number width, [Boolean/Object animate] ) : Ext.Element
setSize( Number width, Number height, [Boolean/Object animate] ) : Ext.Element
设置高度和宽度
setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element
设置当前元素相对于页面的横纵坐标
setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element
设置透明度，opacity为1完全不透明,0完全透明
setPositioning( Object posCfg ) : Ext.Element
为当前元素指定位置信息,参数posCfg参见getPositioning说明
setRegion( Ext.lib.Region region, [Boolean/Object animate] ) : Ext.Element
为当前元素指定区域信息 region定义 见getRegion
setStyle( String/Object property, [String value] ) : Ext.Element
设置样式
setVisibilityMode( visMode Element.VISIBILITY ) : Ext.Element
指示是使用Element.VISIBILITY还是Element.DISPLAY属性来定义可见性
setVisible( Boolean visible, [Boolean/Object animate] ) : Ext.Element
设置可见性
setX( Number The, [Boolean/Object animate] ) : Ext.Element
setXY( Array pos, [Boolean/Object animate] ) : Ext.Element
setY( Number The, [Boolean/Object animate] ) : Ext.Element
设置当前元素相对于page的位置
show( [Boolean/Object animate] ) : Ext.Element
显示当前元素
swallowEvent( String eventName, [Boolean preventDefault] ) : Ext.Element
阻止eventName事件冒泡，并视preventDefault阻断默认行为
toggle( [Boolean/Object animate] ) : Ext.Element
切换元素的visibility 或display属性,依赖于setVisibilityMode设定的
toggleClass( String className ) : Ext.Element
如果样式名存在于当前元素对应的dom 节点，移除，反之应用
translatePoints( Number/Array x, Number y ) : Object
返回一个{left,top}结构
un( String eventName, Function fn ) : Ext.Element
解除事件侦听，参见 removeListener
unclip() : Ext.Element
见clip;
unmask() : void
见mask;
unselectable(): Ext.Element
禁止文本选择
up( String selector, [Number/Mixed maxDepth] ) : Ext.Element
通过样式选择器selector选择祖先节点
update( String html, [Boolean loadScripts], Function callback ) : Ext.Element
利用html更新当前节点内容，loadScripts指示html中如果有script，是否需要运行,这是一个innerHTML的一个老老老问题了
wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element
用另一个元素config包含自己
?
EXT核心API详解(四)-Ext.DomQuery/DomHelper/Template
Ext.DomQuery类
selector语法详见Ext类
compile( String selector, [String type] ) : Function
编写一个选择器或xpath查询到一个方法以方便重用,type取select(默认)或simple值之一
filter( Array el, String selector, Boolean nonMatches ) : Array
过滤el中的元素,保留符合selector的，如果nonMatches为真，结果相反
is( String/HTMLElement/Array el, String selector ) : Boolean
验证el是否匹配selector
select( String selector, [Node root] ) : Array
从root中选择匹配selector的对象数组
selectNode( String selector, [Node root] ) : Element
返回root中第一个匹配selector的对象
selectNumber( String selector, [Node root], Number defaultValue ) : Number
返回root中第一个匹配selector的对象的节点值，转换为整数或浮点数
selectValue( String selector, [Node root], String defaultValue ) : void
返回root中第一个匹配selector的对象的节点值，如果为null,用默认值defaultValue代替
Ext.DomHelper类
append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建一个新的DOM元素并添加到el
参数 o 是一个DOM对象或一个原始html块
applyStyles( String/HTMLElement el, String/Object/Function styles ) : void
应用样式styles到对象el， 样式的对象表示方法见Ext.Element
createTemplate( Object o ) : Ext.Template
由o创建一个新的Ext.Template对象，详见 Ext.Template
insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建一个新的DOM对象o并将他们挺入在el之后/之前
insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :
创建一个新的DOM元素并做为第一个子节点添加到el (看了这个insertFirst，建议将append取一个别名insertLast:))
insertHtml( String where, HTMLElement el, String html ) : HTMLElement
where 可选值beforeBegin/afterBegin/beforeEnd/afterEnd
将html代码插入到el附近,
markup( Object o ) : String
返回DOM对象o对应的html代码
overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :
创建一个新的DOM元素o并用它重写el的内容
Ext.Template类
Template类主要是功能是生产html片断,例
var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
'</div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
公用方法:
Template( String/Array html )
构造一个Ext.Template对象，参数可以是字符串形式的html代码或它们组成的数组，
Template.from( String/HTMLElement el, Object config ) : Ext.Template
能过el的value(优先)或innerHTML来构造模板
append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
insertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element
这组方法提供由 value产生的html 代码，并添加到dom 做为el的最后一个子节点/下一个兄弟节点/前一个兄弟节点/第一个子节点
values解释参见applyTemplate
apply() : void
applyTemplate( Object values ) : String
apply是applyTemplate的简写，如果参数是数字values可以是一个数组，或者一个象 {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}这样的json对象
compile() : Ext.Template
编译模板,替换掉模板中的\=>\\ ,\r\n|\n==>\\n, '=\',主要是为了js自己处理方便
overwrite( Mixed el, Object values, [Boolean returnElement] ) :
利用values生成html替换el的内容
set( String html, [Boolean compile] ) : Ext.Template
设置模板的html,如果compile为真将调用compile方法
?
EXT核心API详解(五)-Ext.EventManager/EventObject/CompositeElement/CompositeElementLite
Ext.EventManager
事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理
addListener( String/HTMLElement el, String eventName, Function handler,
on( String/HTMLElement el, String eventName, Function handler, [Object scope], [Object options] ) : void
onDocumentReady( Function fn, [Object scope], [boolean options] ) : void
removeListener( String/HTMLElement el, String eventName, Function fn ) :
un( String/HTMLElement el, String eventName, Function fn ) : Boolean
参见Ext
onWindowResize( Function fn, Object scope, boolean options ) : void
窗口大小变更时触发
onTextResize( Function fn, Object scope, boolean options ) : void
活动文本尺寸变更时触发
Ext.EventObject
这两个类都定义在EventManager.js中，分开是为了逻辑上更清晰吧,这个类主要用于描述事件本身，一般用做事件处理方法的参数
另外这个害定义了一些键值常量，比ascii码好记
例
function handleClick(e){ // 这儿的e就是一个EventObject对象
e.preventDefault();
var target = e.getTarget();
...
}
var myDiv = Ext.get("myDiv");
myDiv.on("click", handleClick);
//or
Ext.EventManager.on("myDiv", 'click', handleClick);
Ext.EventManager.addListener("myDiv", 'click', handleClick);
getCharCode() : Number
getKey() : Number
在非webkit|khtml类型网页中这两个方法是一样的，得到按键的值
getPageX() : Number
getPageY() : Number
getXY() : Array
得到事件坐标
getRelatedTarget() : HTMLElement
得到关联目标?我总是得到null
getTarget( [String selector], [Number/Mixed maxDepth], [Boolean returnEl] ) :
如果没有定义selector则直接返回target属性,如果定义了selector，则利用selector寻找祖先节点
getTime() : Number
得到事件发生的时间?
getWheelDelta() : Number
应该是个过时的方法，反正在ie和火狐下都不知道做什么用的,原意应该是得到鼠标的按键信息？
hasModifier() : Boolean
事件发生时是否同时按下了ctrl/alt/shift键之一？
preventDefault() : void
阻止浏览器的默认事件？
stopEvent() : void
preventDefault+stopPropagation
stopPropagation() : void
阻止事件冒泡
within( Mixed el, [Boolean related] ) : Boolean
如果事件的目标是el或者它的子节点将返回真
Ext.CompositeElement类
基础的复合元素类,为容器中每个元素创建一个Ext.Element对象
虽然不是继承自Ext.Element，但事实上它几乎支持Element类的所有方法