`

Ext API 收集

阅读更多

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类的所有方法

分享到:
评论

相关推荐

    Ext 2.3中文文档-API

    开发者可以通过API创建复杂的表单,实现数据的收集和提交。 5. **图表绘制**:EXT的图表组件(Charts)能够生成各种统计图表,如柱状图、饼图、线图等,方便数据可视化。文档中包含了图表的配置选项和使用示例。 6...

    ext 4.1中文API

    5. **表单组件**:EXT 4.1提供了多种表单组件,如文本框、选择框、日期选择器等,用于收集用户输入。理解如何创建和验证表单,以及如何将表单数据提交到服务器是开发Web应用的基本技能。 6. **Ajax通信**:EXT的...

    ext学习资料 20篇详细学习笔记 初学者ext学习的文档

    5. **EXT JS API**:深入学习EXT的API文档至关重要。EXT提供了大量的类和方法,掌握它们将使你能够灵活地构建应用。例如,了解Store类用于管理数据,Model类定义数据结构,Proxy类处理数据的获取和存储。 6. **EXT ...

    ext js api

    Ext JS API 深度解析 Ext JS 是一个流行的JavaScript框架,主要用于构建富客户端Web应用程序。它提供了丰富的组件库、强大的数据管理模型以及优雅的API,使得开发者能够创建功能复杂且用户界面美观的应用。本文将...

    不错的ext日志管理系统

    1. **日志收集**:EXT能够自动从各种源收集日志,包括服务器、应用程序、数据库和其他网络设备。它可以实时监控这些源,并将日志数据整合到一个统一的界面中,便于查看和分析。 2. **日志存储与归档**:系统可以...

    EXT教程EXT用大量的实例演示Ext实例

    在Ext使用过程中,可能遇到各种问题,如Ext的收费问题、API文档的查看、在页面中引用Ext、Ext是中文乱码问题、TabPanel的autoLoad属性使用问题等。这些问题的答案在教程中也有详细解答,帮助开发者克服使用中的难题...

    ext 资料收集

    1. `ext中文手册.pdf`:这是一份EXT的中文版官方文档,通常包含了EXT框架的详细介绍、API参考、示例代码和最佳实践。通过阅读这份手册,开发者可以了解到EXT的基本架构、组件系统、事件处理机制等关键概念,以及如何...

    EXT导出Excel代码demo

    在EXT 3.3中,你可能需要借助第三方库,如js-xlsx或jszip,它们提供了创建和操作Excel文件的API。 3. 构建工作表:在XML文档中,每个工作表对应一个元素。你需要为每行数据创建一个元素,并在其中填充单元格数据。...

    ext js中文开发手册

    表单组件是EXT JS中用于收集用户输入的关键部分。它支持验证规则、布局管理和数据绑定,使表单设计变得简单而直观。 **十七、EXT中的继承** EXT JS采用了面向对象的编程模式,支持类的继承和重写。这允许开发者在...

    Ext3 查询框

    EXT3查询框,通常被称为“EXT3 Form Field”,是EXT3组件库中的一个关键部分,用于收集用户的输入数据。它允许用户在特定的输入域内搜索或过滤数据。这种查询框通常与数据网格(EXT3 Grid)配合使用,提供实时搜索...

    EXT小例子包括(增,删,改,查)

    EXT Form是EXT JS中的重要组件,用于收集和显示用户输入。它支持各种字段类型,如文本框、下拉列表、复选框等,并且可以配合Data Model和Store进行数据绑定,实现增删改查的功能。 在EXT JS中,CRUD操作通常通过...

    EXT开发文档

    - **EXT** 官方文档提供了丰富的资源,包括教程、API 文档等,可以帮助开发者深入了解 **EXT** 的各个部分。 - 学习 **EXT 2** 的新特性也是很有帮助的,如组件模型、容器模型、布局等。 通过上述知识点的学习,...

    Extjs中文api

    通过“Ext3.2中文API(最终完成版2010-10-25).CHM”文件,开发者可以查找具体的API方法、配置项和示例代码,以便更好地理解和应用这些功能。这个文档通常包含详细的类介绍、方法、属性、事件和配置选项,帮助开发者...

    Ext框架简介.ppt

    EXT框架是一种基于JavaScript的开源Ajax框架,主要用于构建具有丰富用户界面的...对于新手来说,从阅读EXT的API文档、研究示例程序和实践简单的HelloWorld开始,逐步深入理解EXT的组件和API,是掌握EXT框架的有效途径。

    网上搜集的ext相关教程

    EXT库以其丰富的组件、强大的数据绑定机制和优雅的API设计,成为了企业级Web应用开发的热门选择。 EXT的核心在于它的组件模型,提供了诸如表格、面板、窗口、菜单、工具栏等多种UI组件,这些组件具有高度可定制性和...

    EXT 中文帮助手册

    `Ext+api+中文版.chm`文件是一个帮助文件,很可能包含了EXT库的完整API翻译,这对于中文使用者来说非常有价值,因为原生的英文文档可能会造成理解上的困扰。CHM文件是一种Windows的帮助文件格式,它以离线形式提供了...

    EXT 增删改查的一个例子

    表单组件(Ext.form.Panel)用于收集用户输入,并能与数据模型关联,实现数据的双向绑定。 在这个例子中,开发者可能会展示如何定义数据模型、配置数据存储和代理,创建表格和表单,以及如何处理用户的交互事件,如...

    Ext内容管理系统

    例如,使用Grid Panel组件展示和管理数据,用Form Panel收集和处理用户输入,用Tree Panel展示层级结构的信息,如网站导航菜单。同时,ExtJS的Data Package提供了数据存储和数据绑定的功能,能够方便地与服务器进行...

    Ext 学习文档收集.zip

    包含:1.ext2中文实例.chm 2.Ext 3.0 中文文档.CHM 3.Ext JS 3.1~3.3 API中文文档(CHM格式).CHM 4.EXT 中文手册.pdf 5.Ext Core手册(汉化版).pdf

Global site tag (gtag.js) - Google Analytics