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, array, 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
[ 本帖最后由 zlq4863947 于 2007-11-28 11:03 编辑 ]
zlq4863947 2007-11-28 10:35
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-classSome textdiv
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 32001 PM, Y-m-d his 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('1012006').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 是否闰年 10
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 = {
ISO8601LongY-m-d His,
ISO8601ShortY-m-d,
ShortDate njY,
LongDate l, F d, Y,
FullDateTime l, F d, Y gis A,
MonthDay F d,
ShortTime gi A,
LongTime gis A,
SortableDateTime Y-m-dTHis,
UniversalSortableDateTime Y-m-d HisO,
YearMonth F, Y
};
当然ISO8601Long和ISO8601Short还是非常招人喜欢的
例
dt.format(Date.patterns.ISO8601Long);
dt.format('Y-m-d His');
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], [BooleanNumber 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], [BooleanNumber appendArgs] )Number
定时执行，隔millis毫秒后执行原方法
[ 本帖最后由 zlq4863947 于 2007-11-28 11:06 编辑 ]
zlq4863947 2007-11-28 10:36
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包含自己
zlq4863947 2007-11-28 11:15
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方法
zlq4863947 2007-11-28 11:17
EXT核心API详解(五)-Ext.EventManager
Ext.EventManager
事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理
addListener( StringHTMLElement el, String eventName, Function handler,
on( StringHTMLElement el, String eventName, Function handler, [Object scope], [Object options] ) void
onDocumentReady( Function fn, [Object scope], [boolean options] ) void
removeListener( StringHTMLElement el, String eventName, Function fn )
un( StringHTMLElement 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
在非webkitkhtml类型网页中这两个方法是一样的，得到按键的值
getPageX() Number
getPageY() Number
getXY() Array
得到事件坐标
getRelatedTarget() HTMLElement
得到关联目标我总是得到null
getTarget( [String selector], [NumberMixed maxDepth], [Boolean returnEl] )
如果没有定义selector则直接返回target属性,如果定义了selector，则利用selector寻找祖先节点
getTime() Number
得到事件发生的时间
getWheelDelta() Number
应该是个过时的方法，反正在ie和火狐下都不知道做什么用的,原意应该是得到鼠标的按键信息？
hasModifier() Boolean
事件发生时是否同时按下了ctrlaltshift键之一？
preventDefault() void
阻止浏览器的默认事件？
stopEvent() void
preventDefault+stopPropagation
stopPropagation() void
阻止事件冒泡
within( Mixed el, [Boolean related] ) Boolean
如果事件的目标是el或者它的子节点将返回真
Ext.CompositeElement类
基础的复合元素类,为容器中每个元素创建一个Ext.Element对象
虽然不是继承自Ext.Element，但事实上它几乎支持Element类的所有方法
例
var els = Ext.select(#some-el div.some-class, true);
els.setWidth(100);
add( StringArray els ) CompositeElement
添加 css选择器els匹配的元素 或 元素组成的数组 到当前对象
clear() void
清除所有元素
contains() Boolean
应该是contains(Mixed el)Boolean,当前复合元素中是否含有el
each( Function fn, [Object scope] ) CompositeElement
通过el,this,index参数为每个元素调用fn
fill( StringArray els ) CompositeElement
clear()& add(els)
filter( String selector ) CompositeElement
过滤
first() Ext.Element
第一个元素
getCount() Number
元素的数量
indexOf() Boolean
同contains一样应该有个Mixed参数
item( Number index ) Ext.Element
第index个元素
last() Ext.Element
最后一个元素
removeElement( Mixed el, [Boolean removeDom] ) CompositeElement
删除el元素
replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) CompositeElement
替换
Ext.CompositeElementLite
由Ext.CompositeElement继承而来，重写了一些方法，但没看出与父类有什么不同
addElements invoke item addListener each indexOf replaceElement
zlq4863947 2007-11-28 11:19
EXT核心API详解(六)-Ext.Fx
Ext.Fx类
对于我这样的懒鬼而言，Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类
定义了一些常用的特效方法,不妨自己多动手试试下面的方法，很有趣的
fadeIn( [Object options] ) : Ext.Element
渐显 options参数有以下属性
callback:Function 完成后的回叫方法
scope:Object 目标
easing:String 行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的
easeNone:匀速
easeIn:开始慢且加速
easeOut:开始快且减速
easeBoth:开始慢且减速
easeInStrong:开始慢且加速,t的四次方
easeOutStrong:开始快且减速,t的四次方
easeBothStrong:开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢体会吧
afterCls:String 事件完成后元素的样式
duration:Number 事件完成时间（以秒为单位）
remove:Boolean 事件完成后元素销毁?
useDisplay:Boolean 隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function 事件完成后应用样式
block:Boolean 块状化?
concurrent:Boolean 顺序还是同时执行？
stopFx ：Boolean 当前效果完成后随合的效果是否将停止和移除
fadeOut( [Object options] ) : Ext.Element
渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
frame( [String color], [Number count], [Object options] ) : Ext.Element
边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })
ghost( [String anchor], [Object options] ) : Ext.Element
渐渐滑出视图,anchor定义
tl 左上角(默认)
t 上居中
tr 右上角
l 左边界的中央
c 居中
r 右边界的中央
bl 左下角
b 下居中
br 右下角
例:
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
hasActiveFx() : Boolean
指示元素是否当前有特效正在活动
hasFxBlock() : Boolean
是否有特效阻塞了
highlight( [String color], [Object options] ) : Ext.Element
高亮显示当前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
pause( Number seconds ) : Ext.Element
暂停
puff( [Object options] ) : Ext.Element
吹，吹，吹个大气球，元素渐大并隐没
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
scale( Number width, Number height, [Object options] ) : Ext.Element
缩放
例:el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
});
sequenceFx()
排队特效
shift( Object options ) : Ext.Element
位移,并可重置大小,透明度等
例:
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
slideIn( [String anchor], [Object options] ) : Ext.Element
slideOut( [String anchor], [Object options] ) : Ext.Element
滑入/滑出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
stopFx() : Ext.Element
停止特效
switchOff( [Object options] ) : Ext.Element
收起并隐没
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element
异步特效
zlq4863947 2007-11-28 11:21
(七)-Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetrics/XTemplate
Ext.KeyNav
Ext的keyNav类能为Ext.Element元素提供简单的按键处理方法
例:
var el=Ext.get("textarea");
new Ext.KeyNav(el, {
"left" : function(e){
alert("left key down");
},
scope : el
}
);
它的行为与KeyMap类似，但功能比KeyMap要弱小的多，只能处理以下已定义键
enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end
同情一下KeyNav
方法只有三个,不用多解释
KeyNav( Mixed el, Object config )
disable() : void
enable() : void
Ext.KeyMap类
则强悍的多,其中最重要的当然是对按键的定义更灵活
例:上例用KeyMap来写可能是
var el=Ext.get("textarea");
new Ext.KeyMap(el, {
key:Ext.EventObject.LEFT,
fn: function(e){
alert("left key down");
},
scope : el
}
);
方法
KeyMap( Mixed el, Object config, [String eventName] )
构造,与KeyNav也相似，但更灵活
它是{
key: String/Array, //可以是数字，字符，也可以是Ext.EventObject.LEFT这样的助记符,还能是他们组成的数组
shift: Boolean, //ctrl键按下?
ctrl: Boolean,
alt : Boolean,
fn : Function, //回叫方法
scope: Object //范围
}这样的对象或它们组成的数组
比如{key: 10},{key: [10,13]},{key:'\t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定义
addBinding( Object/Array config ) : void
增加新的绑定动作 config参见构造
disable() : void
enable() : void
isEnabled() : Boolean
允许，静止和状态查询
on( Number/Array/Object key, Function fn, [Object scope] ) : void
只添加一个处理时addBinding的快捷方式,但个人感觉并没有简单到哪儿去。
Ext.util.JSON
轮到大名鼎鼎的JSON了，可惜Ext提供的JSON对象功能好弱小，只有encode主decode两个方法
而且只能编码String/Array/Date,至少也要搞个 xml2json/json2xml方法呀
Ext.util.Format
主要提供了一些格式化方法
capitalize( String value ) : String
首字母大写
date( Mixed value, [String format] ) : String
格式化日期输出,还是Date.format方法好用
dateRenderer( String format ) : Function
返回一个利用指定format格式化日期的方法
defaultValue( Mixed value, String defaultValue ) : String
如果value未定义或为空字符串则返回defaultValue
ellipsis( String value, Number length ) : String
如果value的长度超过length的,取前length-3个并用...替代，对中国人来说还是垃圾功能，用的字符串长度不是字节长度
fileSize( Number/String size ) : String
简单的格式化文件长度为 xxxbytes xxxKB xxxMB,没有GB哟
htmlEncode( String value ) : String
htmlDecode( String value ) : String
HTML编码解码,将& < > “替换为&<>"
lowercase( String value ) : String
将value转换为全小写
stripScripts( Mixed value ) : String
去除脚本标签
stripTags( Mixed value ) : String
去除HTML标签
substr( String value, Number start, Number length ) : String
取子字符串
trim( String value ) : String
去除开头和结尾的空格
undef( Mixed value ) : Mixed
如果value未定义,返回空字符串，反之返回value本身
uppercase( String value ) : String
转为全大写
usMoney( Number/String value ) : String
转为美元表示
Ext.util.DelayedTask
提供一个setTimeout的简单替代方法
公开的方法也只有三个
DelayedTask( [Function fn], [Object scope], [Array args] )
delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) :
cancel() : void
简单的示例用法如果
var task=new Ext.util.DelayedTask(Ext.emptuFn);
task.delay(1000);
task.cancel();
Ext.util.TaskRunner
增强版的DelayedTask,能提供多线程的定时服务，
例:
var task = {
run: function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
},
interval: 1000
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
四个方法都很简单
TaskRunner( [Number interval] )
start( [Object task] ) : Object
stop( Object task ) : Object
stopAll() : void
Ext.util.TextMetrics
这个类主要是为了准备的得到块状化文本正确的高度和宽度
例:
var metrics=Ext.util.TextMetrics.createInstance('div');
metrics.setFixedWidth(100);
var size=metrics.getSize("中华人民共和国中华人民共和国中华人民共和国中华人民共和国");
Ext.MessageBox.alert("getsize",String.format("width:{0}px\theight:{1}px",size.width,size.height))
方法
bind( String/HTMLElement el ) : void
绑定到el
createInstance( String/HTMLElement el, [Number fixedWidth] ) : Ext.util.TextMetrics.Instance
为el创建TextMetrics实例
getHeight( String text ) : Number
getSize( String text ) : Object
getWidth( String text ) : Number
得到尺寸
measure( String/HTMLElement el, String text, [Number fixedWidth] ) : Object
测算文本text在el中将要占用的尺寸
setFixedWidth( Number width ) : void
设置指定的宽度
Ext.XTemplate
增强型模板，支持更多功能了，虽然方法不多，但用起来来还真的很麻烦，但并不建议大家学习这样的自定义语法，不如用xslt
另外这个Xtemplate虽然命名空间在Ext之下，但源文件却是放在util目录中的
XTemplate( String/Array html )
XTemplate.from( String/HTMLElement el ) : Ext.XTemplate
apply() : void
applyTemplate( Object values ) : String
compile() : Function
这些方法Ext.Template中都有说明
