EXTJS API详解

EXT核心API详解

1、Ext类 ………………………………… 2 2、Array类 …………………………… 4

3、Number类 …………………………… 4 4、String类 …………………………… 4

5、Date类 ……………………………… 5 6、Function类 ………………………… 6

7、t类 ………………………… 7 8、ry类 ………………… 13

9、per类 …………………… 14 10、te类 …………………… 14

11、anager类 ……………… 15 12、bject类 ………………… 15

13、iteElement类 ………… 16 14、iteElementLite类 ……… 16

15、类 …………………………… 16 16、类 ……………………… 19

17、类 …………………… 19 18、类 ……………………… 20

19、类 ………………… 20

21、nner类 …………… 21

23、ate类 ………………… 21

25、类 ………………………… 22

27、oxy类 …………… 24

29、Proxy类 ……… 25

31、ader类 ……………26

33、ader类 …………… 26

35、类 …………………… 28

37、Store类 ………… 34

39、类 ………………… 34

41、类 …………………… 36 4243、utton类 ……………… 39

45、类 …………………… 41

47、类 ………………… 43

49、eld类 …………… 44

51、ea类 …………… 45 5253、eld类 ………… 45 5455、eld类 ………… 47

57、em类 …………… 50 5859、类 ………………… 51 6061、tor类 ………… 52 6263、r类 …………………… 55 6465、tor类 ……… 56 6667、em类 ……… 56

69、Model类 ……… 58 7071、ew类 …………… 59 7273、GridPanel类 ……… 62

20、dTask类 ……………… 20

22、trics类 …………… 21

24、tion类 ……………… 22

26、类 ………………… 23

28、oxy类 …………… 24

30、TagProxy类 ………… 25

32、eader类 …………… 26

34、der类 …………… 27

36、ngStore类 ………… 32

38、类 …………………… 34

40、类 ……………………… 35

、utton类 ……………… 38

44、orm类 …………… 40

46、ox类 …………… 42

48、itor类 …………… 43

50、Field类 ………… 44

、rField类 ……… 45

、ox类 ……………… 46

、类 ………………… 50

、r类 ……………… 51

、tem类 …………… 51

、em类 …………… 52

、类 ……………… 56

、类 …………… 56 68、类 ……………… 56

、tyColumnModel类 … 59

、ngView类 ………… 60 74、tyGrid类 …………… 65

1

56

1、Ext类

addBehaviors(Object obj) : void

对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如

addBehaviors({

// id=foo下所有的a标签加入click事件

'#foo a@click' : function(e, t){

// do something

},

// 用,分隔多个选择器

'#foo a, #bar -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返回假,调用格式(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

创建一个命名空间,例

ace('Company', '');

= function() { ... }

2

Store = 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的方法,例

de(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节点

3

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参数指示是否不重写已存在的对象,例

ode("foo=1&bar=2"); //返回 {foo: 1, bar: 2}

ode("foo=1&bar=2&bar=3&bar=4"); //返回 {foo: 1, bar: 4}.

ode("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

2、Array类

indexOf( Object o ) : Numberobject是否在数组中,找不到返回-1;找到返回位置

remove( Object o ) : Array从数组中删除指定的对象object,如果找不到object则数组无变化

3、Number类

constrain( Number min, Number max ) : Number

检查数值是否介于min与max之间, 如果大于max 返回max,如果小于min返回min, 否则返回当前值

4、String类

escape( String string ) : String将string中的'和替换为'

format( String string, String value1, String value2 ) : String格式化字符串,

例:

var cls = 'my-class', text = 'Some text';

var s = ('

4

leftPad( String string, Number size, [String char] ) : String

以char将string补齐为size长度,char默认定义空格

toggle( String value, String other ) : String

交换值,如果当前值等于value,则被赋值other,反之等于value,例:

sort = ('ASC', 'DESC');

trim() : String去除开头或结尾多余的空格

5、Date类

ate( String input, String format ) : Date

将字符串string依指定的格式format转换为时间,其中格式定义详见format方法

例:dt = ate("2006-01-15 3:20:01 PM", "Y-m-d h:i:s A" );

add( String interval, Number value ) : Date

增加时间段,String interval在Data类中已定义

= "ms";

= "s";

= "mi";

= "h";

= "d";

= "mo";

= "y";

例var dt2 = new Date('10/1/2006').add(, -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

5

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类内置了几种格式

ns = {

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-dTH:i:s",

UniversalSortableDateTime: "Y-m-d H:i:sO",

YearMonth: "F, Y"

};

当然ISO8601Long和ISO8601Short还是非常招人喜欢的

例:

(8601Long);

('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是否闰年

6、Function类

createCallback(/**/) : Function

创建回叫方法

createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] ) :

创建委托

6

这两个记法除了传参方式不同,看不出有什么差异都是调用,createCallback可以看作一个简化版的createDelegate

createCallback==>return (window, args);

createDelegate==>return (obj || window, callArgs);

前者参数比较简单,直接传过去了,后者的规则比较复杂点,如果appendArgs为真,args将附加在参数列表之后,如果是数值,args将在参数列表的appendargs位置插入,其它情况下原参将不起作用

例:

var fn = Delegate(scope, [arg1,arg2], true)

//fn(a,b,c) === 1(a,b,c,arg1,arg2);

var fn = Delegate(scope, [arg1,arg2])

//fn(a,b,c) === 1(arg1,arg2);

var fn = Delegate(scope, [arg1,arg2], 1)

//fn(a,b,c) === 1(a,arg1,arg2,b,c);

var fn = Callback(arg1, arg2);

//fn() === func1(arg1, arg2)

createCallback : function(/**/)

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毫秒后执行原方法

7、t类

Element( String/HTMLElement element, [Boolean forceNew] )

由id或DOM节点创建Element对象

( String/HTMLElement el, [String named] ) : Element

由id或DOM节点创建一个全局共享的活动元素,可由named命名以避免可能的冲突

( Mixed el ) : Element

由id或DOM节点或已存在的Element得到一个t对象

addClass( String/Array className ) : t为元素添加一个或多个css类名

addClassOnClick( String className ) : t为点击事件添加和移除css类

addClassOnFocus( String className ) : t为得到和失去焦点添加和移除css类

addClassOnOver( String className, [Boolean preventFlicker] ) : t

为鼠标移入移出事件添加和移除css类(该方法未实际使用preventFlicker参数)

addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) :

为对象添加按键侦听 key由数值或字符串或{key: (number or array), shift: (true/false), ctrl: (true/false), alt:

(true/false)}这样的对象或他们的数组组成

addKeyMap( Object config ) : 功能同addKeyListener,只是传参方式不同

例:

Map({key : "ab",ctrl : true,fn: fn,scope:el });

和

Listener({key:"ab",ctrl:true},fn,el);

是等价的,都是在 按下ctral+a或ctrl+b后呼叫fn

addListener( String eventName, Function fn, [Object scope], [Object options] ) : void

7

定义事件侦听,eventName:事件名,fn:事件处理方法,scrope:范围,其中options的定义比较复杂,可以包含以下属性

scope {Object} : 处理fn的范围

delegate {String} : 一个简单选择器(过滤目标或寻找目标的子孙节点)

stopEvent {Boolean} : 阻止事件,等于preventDefault+stopPropagation

preventDefault {Boolean} : 阻止默认活动

stopPropagation {Boolean} : 阻止事件冒泡

normalized {Boolean} :设为flase将允许浏览器事件替代bject

delay {Number} : 延时多少毫秒后发生

single {Boolean} : 只运行一次

buffer {Number} : 在dTask中预定事件

当然,还可能自定义参数以传入function

alignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : t

将el对齐到element,positon,指示对齐的位置,可选以下定义

tl 左上角(默认)

t 上居中

tr 右上角

l 左边界的中央

c 居中

r 右边界的中央

bl 左下角

b 下居中

br 右下角

position还可以使用?约束移动不能超出窗口

offsets 偏移量,以象素为单位

animate 详见animate定义

例:o('div2','c-bl?',[20,0],true);

采用默认动画将div1的最中央对齐到div2的左下角,并右移20个象素,且不能超出窗口

anchorTo( Mixed element, String position, [Array offsets], [Boolean/Object animate], [Boolean/Number

monitorScroll], Function callback ) : t

功能和alignTo类似,只是当窗口重定义大小的时候也会引发重对齐事件

monitorScroll参数说明是否需要监视滚动条行为,如果定义为数值则是定义的延时,单位为毫秒,默认是50ms,

callback定义了animate完成后的回叫方法

animate( Object args, [Float duration], [Function onComplete], [String easing], [String animType] ) : t

执行动画.

args:目标

duration:时间间隔.默认是0.35

Function:完成后的回叫方法

easing:行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的

easeNone:匀速

easeIn:开始慢且加速

easeOut:开始快且减速

8

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 ) : t

添加子元素el(el须已存在)

appendTo( Mixed el ) : t将当前元素添加到el

applyStyles( String/Object/Function styles ) : t

应用样式,styles是"width:100px"这样的字符串或{width:"100px"}这样的对象,function是指返回这样的字串和对象的函数,这是一个没有用的批示,因为任何传参的地方都可以是返回要求类型的function.另见setStyle

autoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : t

自适应高度,参数都是老相识了,惟一需要注意的是这个方法使用了setTimeout,高度不会马上变更

blur() : t失去焦点,忽略所有的异常

boxWrap( [String class] ) : t

用一个指定样式class的div将当前元素包含起来,class默认值为x-box

center( [Mixed centerIn] ) : void

alignTo的简华版.相当于alignTo(centerIn || document, 'c-c'),当前元素的中心对齐到centerIn元素的中心

child( String selector, [Boolean returnDom] ) : HTMLElement/t

依selector选择子孙节点,依returnDom不同批示返回html元素还是ext元素,未定义或false时返回t

clean( [Boolean forceReclean] ) : void

清除无用的空白文本节点(我喜欢这个想法)

clearOpacity() : t

清除当前元素样式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/-khtml-opacity

clearPositioning( [String value] ) : t

清除定位,恢复到默认值,相当于

le({"left": value,"right": value,"top": value,"bottom": value,"z-index": "","position" : "static"});

clip() : t裁剪溢出部分,用unclip()恢复

contains( HTMLElement/String el ) : Boolean当前元素中是否存在el

createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : t

创建一个新的子节点

config :DomHelper元素对象,如果没有特别指明tag,将使用div做默认tag,详情参见DomHelper,如果未定义insertBefore,则追加

9

createProxy( String/Object config, [String/HTMLElement renderTo], [Boolean matchBox] ) : t

创建一个代理元素

config:代理元素的类名或DomHelper config对象

renderTo:将要绘制代理元素的html element或id

matchBox:是否对齐

createShim() : t在当前元素之前创建一个classname为ext-shim的iframe,有什么用?

down( String selector, [Boolean returnDom] ) : HTMLElement/t

通过样式选择器selector选择子孙节点

enableDisplayMode( [String display] ) : tsetVisibilityMode的简便方法

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] ) : t/HTMLElement

得到第一个符合selector条件的子节点,跳过文本节点

focus() : t得到焦点

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之和

10

getPositioning() : Object

得到当前元素的位置信息 返回含以下属性的对象{position,left,right,top,bottom,z-index}

getRegion() : 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得到由参数组成的对象

例:les('color', 'font-size', 'width')

可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}

getTop( Boolean local ) : Number得到顶点纵坐 标

getUpdater() : r得到当前元素的Updater对象,参见r类

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] ) : t隐藏当前元素

hover( Function overFn, Function outFn, [Object scope] ) : t设置鼠标移入移出事件

initDD( String group, Object config, Object overrides ) :

initDDProxy( String group, Object config, Object overrides ) : y

initDDTarget( String group, Object config, Object overrides ) : et

这个要放到 去专门搞了,用于拖曳

insertAfter( Mixed el ) : t

insertBefore( Mixed el ) : t

insertFirst( Mixed/Object el ) : t

在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] ) : t/HTMLElement见first

load( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : t直接应用当前updater的update方法

11

mask( [String msg], [String msgCls] ) : Element为当前对象创建蒙片

move( String direction, Number distance, [Boolean/Object animate] ) : t

相前元素相对于当前位置移动,

direction批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down".

distance,指示要移动的距离,以像素为单位

moveTo( Number x, Number y, [Boolean/Object animate] ) : t称动到指定的位置

next( [String selector], [Boolean returnDom] ) : t/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] ) : t/HTMLElement前一个符合selector的兄弟节点

query( String selector ) : Array通过样式选择器选择子节点

radioClass( String/Array className ) : t添加样式或样式数组到当前元素，并移除兄弟节点中的指定样式

relayEvent( String eventName, Object object ) : void将当前元素的eventName事件同时转发给object对象

remove() : void从当前DOM中删除元素,并从缓存中移除

removeAllListeners() : t移除所有的侦听者

removeClass( String/Array className ) : t移除样式类

removeListener( String eventName, Function fn ) : t移除事件eventName的fn侦听器

repaint() : t强制浏览器重绘当前元素

replace( Mixed el ) : t用当前元素替换el

replaceClass( String oldClassName, String newClassName ) : t替换样式类

replaceWith( Mixed/Object el ) : t用el替换当前元素

scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean

滚动,scroll会保证元素不会越界,direction和distance参数见move

scrollIntoView( [Mixed container], [Boolean hscroll] ) : t滚动到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] ) : t

设置属性，例

({width:'200px',height:'200px'});

setBottom( String bottom ) : t

setLeft( String left ) : t

setRight( String right ) : t

setTop( String top ) : t

setLeftTop( String left, String top ) : t

设置css 对象的属性值

setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : t

马上改变当前元素的位置和尺寸

setBox( Object box, [Boolean adjust], [Boolean/Object animate] ) : t为当前元素设置一个盒子box:{x, y, width, height},adjust指示是否马上调整尺寸

12

setDisplayed( Boolean value ) : t设置可见性

setHeight( Number height, [Boolean/Object animate] ) : t

setWidth( Number width, [Boolean/Object animate] ) : t

setSize( Number width, Number height, [Boolean/Object animate] ) : t设置高度和宽度

setLocation( Number x, Number y, [Boolean/Object animate] ) : t设置当前元素相对于页面的横纵坐标

setOpacity( Float opacity, [Boolean/Object animate] ) : t设置透明度，opacity为1完全不透明,0完全透明

setPositioning( Object posCfg ) : t为当前元素指定位置信息,参数posCfg参见getPositioning说明

setRegion( region, [Boolean/Object animate] ) : t为当前元素指定区域信息 region定义 见getRegion

setStyle( String/Object property, [String value] ) : t设置样式

setVisibilityMode( visMode LITY ) : t指示是使用LITY还是Y属性来定义可见性

setVisible( Boolean visible, [Boolean/Object animate] ) : t设置可见性

setX( Number The, [Boolean/Object animate] ) : t

setXY( Array pos, [Boolean/Object animate] ) : t

setY( Number The, [Boolean/Object animate] ) : t设置当前元素相对于page的位置

show( [Boolean/Object animate] ) : t显示当前元素

swallowEvent( String eventName, [Boolean preventDefault] ) : t阻止eventName事件冒泡，并视preventDefault阻断默认行为

toggle( [Boolean/Object animate] ) : t切换元素的visibility 或display属性,依赖于setVisibilityMode设定的

toggleClass( String className ) : t如果样式名存在于当前元素对应的dom 节点，移除，反之应用

translatePoints( Number/Array x, Number y ) : Object返回一个{left,top}结构

un( String eventName, Function fn ) : t解除事件侦听，参见 removeListener

unclip() : t见clip;

unmask() : void见mask;

unselectable(): t禁止文本选择

up( String selector, [Number/Mixed maxDepth] ) : t通过样式选择器selector选择祖先节点

update( String html, [Boolean loadScripts], Function callback ) : t利用html更新当前节点内容，loadScripts指示html中如果有script，是否需要运行,这是一个innerHTML的一个老老老问题了

wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element用另一个元素config包含自己

8、ry类

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代替

13

9、per类

append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/t

创建一个新的DOM元素并添加到el

参数 o 是一个DOM对象或一个原始html块

applyStyles( String/HTMLElement el, String/Object/Function styles ) : void应用样式styles到对象el， 样式的对象表示方法见t

createTemplate( Object o ) : te由o创建一个新的te对象，详见 te

insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/t

insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/t创建一个新的DOM对象o并将他们挺入在el之后/之前

insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :创建一个新的DOM元素并做为第一个子节点添加到el (看了这个insertFirst，建议将append取一个别名insertLast:))

insertHtml( String where, HTMLElement el, String html ) : HTMLElementwhere 可选值beforeBegin/afterBegin/beforeEnd/afterEnd将html代码插入到el附近,

markup( Object o ) : String返回DOM对象o对应的html代码

overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :创建一个新的DOM元素o并用它重写el的内容

10、te类

Template类主要是功能是生产html片断,例

var t = new te(

'

);

('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

公用方法:

Template( String/Array html )构造一个te对象，参数可以是字符串形式的html代码或它们组成的数组，

( String/HTMLElement el, Object config ) : te

能过el的value(优先)或innerHTML来构造模板

append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/t

insertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/t

insertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/t

insertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/t

这组方法提供由 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() : te

编译模板,替换掉模板中的=> ,rn|n==>n, '=',主要是为了js自己处理方便

14

overwrite( Mixed el, Object values, [Boolean returnElement] ) :利用values生成html替换el的内容

set( String html, [Boolean compile] ) : te

设置模板的html,如果compile为真将调用compile方法

11、anager类

事件管理者中的大部分方法都在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活动文本尺寸变更时触发

12、bject类

这两个类都定义在中，分开是为了逻辑上更清晰吧,这个类主要用于描述事件本身，一般用做事件处理方法的参数

另外这个害定义了一些键值常量，比ascii码好记

例

function handleClick(e){ // 这儿的e就是一个EventObject对象

tDefault();

var target = get();

...

}

var myDiv = ("myDiv");

("click", handleClick);

//or

("myDiv", 'click', handleClick);

tener("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() : voidpreventDefault+stopPropagation

stopPropagation() : void阻止事件冒泡

15

within( Mixed el, [Boolean related] ) : Boolean如果事件的目标是el或者它的子节点将返回真

13、iteElement类

基础的复合元素类,为容器中每个元素创建一个t对象

虽然不是继承自t，但事实上它几乎支持Element类的所有方法

例:

var els = ("#some-el -class", true);

th(100);

add( String/Array els ) : CompositeElement添加 css选择器els匹配的元素 或 元素组成的数组 到当前对象

clear() : void清除所有元素

contains() : Boolean应该是contains(Mixed el):Boolean,当前复合元素中是否含有el

each( Function fn, [Object scope] ) : CompositeElement通过el,this,index参数为每个元素调用fn

fill( String/Array els ) : CompositeElementclear()& add(els)

filter( String selector ) : CompositeElement过滤

first() : t第一个元素

getCount() : Number//元素的数量

indexOf() : Boolean同contains一样应该有个Mixed参数

item( Number index ) : t第index个元素

last() : t最后一个元素

removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement删除el元素

replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement替换

14、iteElementLite类

由iteElement继承而来，重写了一些方法，但没看出与父类有什么不同

addElements /invoke /item /addListener /each /indexOf /replaceElement

15、类

对于我这样的懒鬼而言，Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类

定义了一些常用的特效方法,不妨自己多动手试试下面的方法，很有趣的

fadeIn( [Object options] ) : t

渐显 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:

16

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] ) : t 渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度

例:({duration:5,endOpacity:0.7});

frame( [String color], [Number count], [Object options] ) : t 边框变亮扩展然后渐隐

例:("ff0000", 10, { duration: 3 })

ghost( [String anchor], [Object options] ) : t

渐渐滑出视图,anchor定义

tl 左上角(默认)

t 上居中

tr 右上角

l 左边界的中央

c 居中

r 右边界的中央

bl 左下角

b 下居中

br 右下角

例:

('b', {

easing: 'easeOut',

duration: .5

remove: false,

useDisplay: false

});

hasActiveFx() : Boolean指示元素是否当前有特效正在活动

hasFxBlock() : Boolean是否有特效阻塞了

highlight( [String color], [Object options] ) : t高亮显示当前元素

例:ght("ffff9c", {

attr: "background-color", //can be any valid CSS property (attribute) that supports a color value

endColor: (current color) or "ffffff",

17

easing: 'easeIn',

duration: 1

});

pause( Number seconds ) : t暂停

puff( [Object options] ) : t吹，吹，吹个大气球，元素渐大并隐没

例:({

easing: 'easeOut',

duration: .5,

remove: false,

useDisplay: false

});

scale( Number width, Number height, [Object options] ) : t

缩放

例:(

[element's width],

[element's height], {

easing: 'easeOut',

duration: .35

});

sequenceFx()排队特效

shift( Object options ) : t位移,并可重置大小,透明度等

例:

({

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] ) : t

slideOut( [String anchor], [Object options] ) : t

滑入/滑出

例:n('t', {

easing: 'easeOut',

duration: .5

});

stopFx() : t停止特效

switchOff( [Object options] ) : t收起并隐没

例:

Off({

18

easing: 'easeIn',

duration: .3,

remove: false,

useDisplay: false

});

syncFx() : t异步特效

16、类

Ext的keyNav类能为t元素提供简单的按键处理方法

例:

var el=("textarea");

new (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

17、类

则强悍的多,其中最重要的当然是对按键的定义更灵活

例:上例用KeyMap来写可能是

var el=("textarea");

new (el, {

key:,

fn: function(e){

alert("left key down");

},

scope : el

}

);

方法

KeyMap( Mixed el, Object config, [String eventName] )

构造,与KeyNav也相似，但更灵活

它是{

key: String/Array, //可以是数字，字符，也可以是这样的助记符,还能是他们组成的数组

shift: Boolean, //ctrl键按下?

19

ctrl: Boolean,

alt : Boolean,

fn : Function, //回叫方法

scope: Object //范围

}这样的对象或它们组成的数组

比如{key: 10},{key: [10,13]},{key:'t'},{key:'abcd'},{key:}都是合法的定义

addBinding( Object/Array config ) : void增加新的绑定动作 config参见构造

disable() : void

enable() : void

isEnabled() : Boolean允许，静止和状态查询

on( Number/Array/Object key, Function fn, [Object scope] ) : void

只添加一个处理时addBinding的快捷方式,但个人感觉并没有简单到哪儿去。

18、类

轮到大名鼎鼎的JSON了，可惜Ext提供的JSON对象功能好弱小，只有encode主decode两个方法

而且只能编码String/Array/Date,至少也要搞个 xml2json/json2xml方法呀

19、类

主要提供了一些格式化方法

capitalize( String value ) : String首字母大写

date( Mixed value, [String format] ) : String格式化日期输出,还是方法好用

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转为美元表示

20、dTask类

提供一个setTimeout的简单替代方法

公开的方法也只有三个

DelayedTask( [Function fn], [Object scope], [Array args] )

delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) :

cancel() : void

简单的示例用法如果

20

var task=new dTask(n);

(1000);

();

21、nner类

增强版的DelayedTask,能提供多线程的定时服务，

例:

var task = {

run: function(){

('clock').update(new Date().format('g:i:s A'));

},

interval: 1000

}

var runner = new nner();

(task);

四个方法都很简单

TaskRunner( [Number interval] )

start( [Object task] ) : Object

stop( Object task ) : Object

stopAll() : void

22、trics类

这个类主要是为了准备的得到块状化文本正确的高度和宽度

例:

var metrics=Instance('div');

edWidth(100);

var size=e("中华人民共和国中华人民共和国中华人民共和国中华人民共和国");

("getsize",("width:{0}pxtheight:{1}px",,))

方法

bind( String/HTMLElement el ) : void绑定到el

createInstance( String/HTMLElement el, [Number fixedWidth] ) : ce为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设置指定的宽度

23、ate类

增强型模板，支持更多功能了，虽然方法不多，但用起来来还真的很麻烦，但并不建议大家学习这样的自定义语法，不如用xslt

另外这个Xtemplate虽然命名空间在Ext之下，但源文件却是放在util目录中的

XTemplate( String/Array html )

( String/HTMLElement el ) : ate

21

apply() : void

applyTemplate( Object values ) : String

compile() : Function

这些方法te中都有说明，

24、tion类

访问指定的url,这是个异步调用类,如果想得到服务器信息,请在request参数中指定callback方法或指定侦听者(对文件上传无效)

Connection( Object config ) 构造,config定义为{

autoAbort : Boolean,

defaultHeaders : Object,

disableCaching : Boolean,

extraParams : Object,

method : String,

timeout : Number,

url : String

}

对象

方法:由 Observable继承过来的方法省略

abort( [Number transactionId] ) : void放弃请求,如果同时有多个请求发生,参数指示请求进程序号,不指定则是放弃最后一个请求

isLoading( [Number transactionId] ) : Boolean第transactionId个请求是否完成载入,未批定指最后一个

request( [Object options] ) : Number最实用的当然是这个方法了,返回的正是前面的两个方法所需要的进程id

其中options定义为{

url:string, //请求url

params:Object/String/Function, //以post方法请求时传递的参数

method:string , //Get/Post

callback:Function, //回叫方法,不管是成功还是失败都会呼叫这个方法,有三个参数,由options传入的options参数,success:Boolean,成功? response:Object, 含有返回数据的XMLHttpRequest对象

success:Function, //成功时回叫,第一个参数为XMLHttpRequest对象,第二个参数传入指定的options

failure:Function, //失败时回叫,参数同success

scope:Object, //范围

form.:Object/String, //一个form对象或它的id,可以由此自动生成参数params

isUpload:Boolean, //文件上传?通常可以自动检测

headers:Object, //要自定义的请求头信息

xmlData:Object //一个xml文档对象,它将通过url附加参数的方式发起请求

disableCaching:Boolean //是否禁用缓存?默认为真

}

25、类

由tion 继承而来,方法和父类一模一样,但使用起来更简单一些,是一个全局惟一静态类

示例:

t({

url: '',

success: someFn,

failure: otherFn,

22

headers: {

'my-header': 'foo'

},

params: { foo: 'bar' }

});

t({

form. 'some-form',

params: 'foo=bar'

});

//所有的请求都会加个这个默认的头

tHeaders = {

'Powered-By': 'Ext'

};

//所有的Ext,Ajax在发起请求前都会调用showSpinner

('beforerequest', inner, this);

26、类

基本上可以理解为.net中的datarow或者sql server中的一行数据，它存放了数据的定义信息和他们的值

[公有属性]

data : Object 数据内容，一个json对象

dirty : Boolean 是否修改过

id : Object 惟一ID,默认从1000开始以1剃增

modified : Object 如果记录没有修改过，为null如果修改过则存放原始值信息

[公有方法]

Record( Array data, [Object id] )

这个构造方法并不用于创建记录对象，相反，应该使用create方法来创建record对象,参数data定义见create方法,id默认递增起始id

beginEdit() : void开始修改

cancelEdit() : void 放弃所做的修改,参见commit

copy( [String id] ) : Record//创建当前record的一个克隆值,如果未指定id使用当前id+1

commit( [Boolean silent] ) : void commit方法一般会被Store对象调用而不是recorde本身,提交自创建或最后一次修改后的所有变更,如果silent为真将不会通知store对象

create( [Array o] ) : function静态构造方法 o是config数组

其中config可以含有如下属性

{

name : String //字段名

mapping : String //用于reader时的映射关系，如果是用于jsonreader，使用相对当前记录的javascript表达式

//,如果是用于xmlreader,则是相对于记录的domquery表达式,对于ArrayReader,则是序号

type:String //可选值 auto /string/int/float/boolean/date,其中auto是默认值，不进行转换

sortType : Mixed //排序类型,pes成员之一,参见sortTypes

sortDir : String //正序倒序 ASC/DESC值之一

convert : Function //转换函数,这个功能很有用，可自定义，接收当前value返回处理后的value

23

dateFormat : String //日期格式化字符串,convert:function的一个特例，使用ate方法转换当前日期

}

endEdit() : void结束修改

get( name {String} ) : Object指定命名字段string的值

getChanges() : Object返回修改记录的对象

reject( [Boolean silent] ) : void和commit相似，当然是拒绝所做的修改

set( String name, Object value ) : void为字段name设定新值value

27、oxy类

数据代理类是一个纯虚类，主要用于生成对象，没有公开的属性和方法，只是归定子类需要处理三个事件

beforeload : ( Object This, Object params )

load : ( Object This, Object o, Object arg )

loadexception : ( Object This, Object o, Object arg, Object e )

事实上参数也是子类自定义的

28、oxy类

api文档中说httpProxy是从object继承来的，事实上source中它和下面的Proxy/TagProxy都继承于DataProxy

HttpProxy用于远程代理,而且服务端返回信息时必须指定Content-Type属性为"text/xml".

HttpProxy( Object conn )

构造一个HttpProxy对象,参数可以是一个类似于{url: ''}这样的json对象,也可以是一个tion对象,如果参数没有指定，将使用对象将被用于发起请求

getConnection() : Connection得到当前连接对象

load( Object params, ader reader, Function callback, Object scope, Object arg ) : void

从配置的connection对象得到record数据块，并激发callback

params: 发起http请求时所要传递到服务端的参数

DataReader: 见DataReader

callback: 回叫方法,第一个参数为接收到的信息,第二个参数为arg,第三个是成功标志

scope: 范围

arg: 这儿的参数将会传递给回叫函数callback

使用示例:

var proxy=new oxy({url:''});

//关于reader将会在ader中讲解

var reader = new der({

totalRecords: "results",

record: "row",

id: "id"

}, [

{name: 'name', mapping: 'name'},

{name: 'occupation'}

]);

24

//定义回叫方法

var metadata;

function callback(data,arg,success){

if(success){

metadata=data;

}

}

//从connection配置的url中利用reader将返回的xml文件转为元数据,并传递给callback

( null,reader,callback,this);

29、Proxy类

MemoryProxy( Object data )构造

load( Object params, ader reader, Function callback, Object scope, Object arg ) : void

取数据，和HttpProxy类似,只是params参数没有被使用

使用示例

var proxy=new Proxy([ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]);

var reader = new eader(

{id: 0},

[

{name: 'name', mapping: 1},

{name: 'occupation', mapping: 2}

]);

var metadata;

function callback(data,arg,success){

metadata=data;

}

( null,reader,callback,this);

30、TagProxy类

这个类和HttpProxy类似，也是用于请求远程数据,但能用于跨主域调用,如果请求时使用了callback参数

则服务端应指定Content-Type属性为"text/javascript"

并返回callback(jsonobject)

反之则应置Content-Type属性为"application/x-json"

并直接返回json对象

ScriptTagProxy( Object config )

构造,其中

config定义为{

callbackParam : String, //回叫参数

nocache : Boolean, //是否缓存

timeout : Number, //超时

url : String //请求数据的url

}

25

abort() : void放弃

31、ader类

纯虚类,从数据源得到结构化数据转换为元数据对象,对象包含Record的集合,一般用做Store对象的元数据,

具有如下格式

{

totalRecord:int,

records:Array of

}

具体使用参见三个子类

eader/ader/der

方法

DataReader( Object meta, Object recordType )构造

32、eader类

用于读数组到一个元数据对象

ArrayReader( Object meta, Object recordType )

构造,第一个参数是配置除了可以指示使用哪个字段做id外,不懂其它的用法,

第二个参数是recordType与record对象的create方法的参数一样,是一样config对象数组,具体参见

readRecords( Object o ) : Object

读取o,返回一个元数据对象

用例示范:

//定义数组

var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];

var reader = new eader(

//以第一个元素做为recordid

{id: 0},

//定义数组到record的映射关系

[

{name: 'name', mapping: 1},

{name: 'occupation', mapping: 2}

]

);

//生成元数据

var data=cords(arr);

33、ader类

用于将一个json对象转换为元数据对象

JsonReader( Object meta, Object recordType )

JsonReader的构造参数meta可以有更多选择,

{

id : String,

root : String,

successProperty : String,

26

totalProperty : String

}

都是对应json对象的属性名

read( Object response ) : Object从一个response对象返回,seText属性应仅含有一个json格式数据块

readRecords( Object o ) : Object读取o,返回一个元数据对象

使用示例:

var json={ 'results': 2, 'rows': [{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },

{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]

};

var reader=new ader(

{

totalProperty: "results",//totalRecords属性由s得到

root: "rows", //构造元数据的数组由得到

id: "id" //id由得到

},[

{name: 'name', mapping: 'name'},

{name: 'occupation'} //如果name与mapping同名,可以省略mapping

]

)

var data=cords(json);

34、der类

xmlreader对象当然是为xml而准备的

构造:

XmlReader( Object meta, Mixed recordType )

meta与jsonreader类似,

meta是一个{

id : String,

record : String,

success : String,

totalRecords : String

}对象,只是这些字符串都是相对于文档根目录的domquery路径

read( Object response ) : Object

readRecords( Object doc ) : Object

....

var str=["",

"",

"2",

"",

"1",

"Bill",

"Gardener",

"",

"",

27

"2",

"Ben",

"Horticulturalist",

"",

""].join("");

//生成xmldocument对象

var xmlDocument;

if(){

xmlDocument = new ActiveXObject("readedDOMDocument")

=false;

eExternals = false;

L(str)

}

else{

xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");

}

//然后开始...和其它两个reader一样的用法,只是这儿换了一种写法,recordtype也可以是一个record对象

var record = ([

{name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"

{name: 'occupation'} // This field will use "occupation" as the mapping.

])

var reader = new der({

totalRecords: "results",

record: "row", //row是节点选择器

id: "id"

}, record);

var data=cords(xmlDocument);

35、类

store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表

方法:不列举继承来的方法

Store( Object config )

构造,config定义为{

autoLoad : Boolean/Object, //自动载入

baseParams : Object, //只有使用httpproxy时才有意义

data : Array, //数据

proxy : oxy,//数据代理

pruneModifiedRecords : boolean,//清除修改信息

reader : , //数据读取器

remoteSort : boolean, //远程排序?

sortInfo : Object, //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象

url : String, //利用url构造HttpProxy

}

add( [] records ) : void增加记录records 到store

28

addSorted( record ) : void增加record到store并排序(仅本地排序时有用)

clearFilter( Boolean suppressEvent ) : void清除过滤器

collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array收集由dataIndex指定字段的惟一值

commitChanges() : void提交Store所有的变更,会引发Update事件

filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void

设定过滤器

field:String //字段名

value:String //RegExp 如果是字符器,检查field是否以value开始,如果是正则,检查是否匹配

anyMatch:Boolean //匹配任何部分而不仅令是开始

caseSensitive:Boolean //大小写敏感?

filterBy( Function fn, [Object scope] ) : void更强悍的过滤方法.fn接收两个参数record和id

find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) :

Number找到符合条件的第一条记录,参数同filter

findBy( Function fn, [Object scope], [Number startIndex] ) : Number参见filterBy

getAt( Number index ) :

getById( String id ) : 依充号/id得到record对象

getCount() : void得到记录数

getModifiedRecords() : []得到修改过的记录集

getRange( [Number startIndex], [Number endIndex] ) : []得到指定范围的记录集合

getSortState() : void得到排序状态:显然不是void而是返回一个排序对象,同sortInfo一样的结构{field:

"fieldName", direction: "ASC|DESC"}

getTotalCount() : void这个对于翻页信息还是很有用的

indexOf( record ) : Number

indexOfId( String id ) : Number由记录或id得到序号

insert( Number index, [] records ) : void在指定的位置插入记录,并引发add事件

isFiltered() : Boolean当前设置了过滤器则返回真

load( Object options ) : void由指定的Proxy使用指定的reader读取远程数据

options定义为

{

params :Object, //请求url需要附加的参数

callback :Function//回叫方法,接收三个参数

//r : [] //返回的record数组

//options: Options load方法传入的options

//success: Boolean //成功

scope :Object, //范围.默认是store本身

add :Boolean 追加还是更新

}

loadData( Object data, [Boolean append] ) : void用法比load简单一点,目的是一样的,只是这次数据由本地读取

query( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : MixedCollection

queryBy( Function fn, [Object scope] ) : MixedCollection查询,参数和find类似,但返回所有符合条件的record,而不是第一个符合条件记录的序号

rejectChanges() : void放弃所有的变更

reload( [Object options] ) : void重新载入,相当于 load(options,false),如果连options都没有传入,则取最后一次

29

load时使用的参数

remove( record ) : void移除指定记录

removeAll() : void移除所有记录

setDefaultSort( String fieldName, [String dir] ) : void设置默认排序规则

sort( String fieldName, [String dir] ) : void排序

sum( String property, Number start, Number end ) : Number对property字段由start开始到end求和

事件列表

add : ( Store this, [] records, Number index )

beforeload : ( Store this, Object options )

clear : ( Store this )

datachanged : ( Store this )

load : ( Store this, [] records, Object options )

loadexception : ()

metachange : ( Store this, Object meta. )

remove : ( Store this, record, Number index )

update : ( Store this, record, String operation )

看名字都很简单,参数也不复杂,略过

用例

//得到远程json对象

//其中内容为

//{ 'results': 2, 'rows': [

// { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },

// { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]

//}

//定义proxy

var proxy=new oxy(...{url:''});

//定义reader

var reader=new ader(

...{

totalProperty: "results",//totalRecords属性由s得到

root: "rows", //构造元数据的数组由得到

id: "id" //id由得到

},[

...{name: 'name', mapping: 'name'},

...{name: 'occupation'} //如果name与mapping同名,可以省略mapping

]

)

//构建Store

var store=new (...{

proxy:proxy,

reader:reader

});

//载入

();

30

示例2

//得到远程xml文件

//其中xml文件内容为

2

1

Bill

Gardener

2

Ben

Horticulturalist

var proxy=new oxy(...{url:''});

var reader = new der(...{

totalRecords: "results",

record: "row",

id: "id"

}, [

...{name: 'name', mapping: 'name'},

...{name: 'occupation'}

]);

var store=new (...{

proxy:proxy,

reader:reader

});

();

示例3

//从本地数组得到

var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];

var reader = new eader(

{id: 0},

[

{name: 'name', mapping: 1},

31

{name: 'occupation', mapping: 2}

]);

var store=new ({

reader:reader

});

ta(arr);

36、ngStore类

继承自,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用GroupingStore时必须指定sortInfo信息

增加了配置属性

groupField : String//用于分组的字段

groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假

remoteGroup : Boolean//远程排序

当然也会多一个group方法

groupBy( String field, [Boolean forceRegroup] ) : void

顾名思义都是重新排序用的

下面是个简单的示例

var arr=[ [1, '本', '拉登'], [2, '笨', '拉登'],[3, '笨', '拉灯'] ];

var reader = new eader(

...{id: 0},

[

...{name: 'name', mapping: 1},

...{name: 'occupation', mapping: 2}

]);

var store=new ngStore(...{

reader:reader,

groupField:'name',

groupOnSort:true,

sortInfo:...{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定sortInfo信息

});

ta(arr);

//GridPanel以后会讨论,这儿使用它是为了直观的表现GroupingStore

var grid = new nel(...{

ds: store,

columns: [

...{header: "name", width: 20, sortable: true,dataIndex: 'name'},

32

...{header: "occupation", width: 20,sortable: true, dataIndex: 'occupation'}

],

view: new ngView(...{

forceFit:true,

groupTextTpl: '{text} ({[]} {[ > 1 ? "Items" : "Item"]})'

}),

frame.:true,

width: 700,

height: 450,

collapsible: true,

animCollapse: false,

title: 'Grouping Example',

renderTo: 'Div_GridPanel'

});

ore

也是Store子类,目标是更方便的使用json对象做数据源

构造中多了fields,root,用法如下例所示

/**//*

这是使用远程对象,返回内容与下面本地对象的data一致

var store=new ore({

url:'',

root:'rows',

fields:['id','name','occupation']

});

();

*/

var store=new ore(...{

data:...{ 'results': 2, 'rows': [

...{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },

...{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }

]},

autoLoad:true,

root:'rows',

fields:['id','name','occupation']

})

//目前请先略过gridpanel,以后再说

var grid = new nel(...{

ds: store,

columns: [

...{header: "id", width: 200, sortable: true,dataIndex: 'id'},

...{header: "name", width: 200, sortable: true,dataIndex: 'name'},

...{header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}

],height:350,

width:620,

title:'Array Grid',

33

renderTo: 'Div_GridPanel'

});

37、Store类

从数组对象更方便的创建Store对象,

例

var store=new ore(...{

data:[

[1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist']

],

autoLoad:true,

fields:[...{name: 'name', mapping: 1},...{name:'occupation',mapping:2}]

})

var grid = new nel(...{

ds: store,

columns: [

...{header: "name", width: 200, sortable: true,dataIndex: 'name'},

...{header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}

],height:350,

width:620,

renderTo: 'Div_GridPanel'

});

38、类

继承自Observable,用于存放树装的数据结构

方法

Tree( [Node root] )以root为根构造对象

getNodeById( String id ) : Node由指定id得到节点

getRootNode() : Node得到根节点,由属性root得到更方便

setRootNode( Node node ) : Node设置根节点

事件有

append : ( Tree tree, Node parent, Node node, Number index )

beforeappend : ( Tree tree, Node parent, Node node )

beforeinsert : ( Tree tree, Node parent, Node node, Node refNode )

beforemove : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )

beforeremove : ( Tree tree, Node parent, Node node )

insert : ( Tree tree, Node parent, Node node, Node refNode )

move : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )

remove : ( Tree tree, Node parent, Node node )

39、类

节点

属性

attributes : Object节点属性集

childNodes : Array子节点

firstChild : Node第一个子节点

id : String id

34

lastChild : Node最后一个子节点

nextSibling : Node下一个兄弟节点

parentNode : Node父节点

previousSibling : Node前一个兄弟节点

Node( Object attributes )构造节点

appendChild( Node/Array node ) : Node将node做为附加在当前节点的lastChild之后

bubble( Function fn, [Object scope], [Array args] ) : void由当前节点开始一直上溯到根节点,对于每个节点应用fn,直到有一个fn返回假为止

cascade( Function fn, [Object scope], [Array args] ) : void由当前节点开始一下对每个子孙节点应用fn.直到返回false为止

contains( Node node ) : Boolean当前节点是node的祖先节点?

eachChild( Function fn, [Object scope], [Array args] ) : void基本同cascade,但只针对子节点应用fn

findChild( String attribute, Mixed value ) : Node在子节点中找到第一个有属性attribute值为value的节点

findChildBy( Function fn, [Object scope] ) : Node在子节点中找到第一个应用fn返回真的节点

getDepth() : Number得到当前节点深度,根节点深度为0

getOwnerTree() : Tree得到当前节点的Tree对象

getPath( [String attr] ) : String得到当前节点的路径,默认attr为id

indexOf( Node node ) : Numbernode在当前节点的子节点中的位置

insertBefore( Node node, Node refNode ) : Node在参考节点refNode之前插入node节点

isAncestor( Node node ) : Boolean当前节点是node的祖先节点?

isFirst() : Boolean

isLast() : Boolean当前节点是父节点的第一/最后一个节点

isLeaf() : Boolean是叶节点?指不含子节点

item( Number index ) : Node第index个子节点

removeChild( Node node ) : Node移除node子节点

replaceChild( Node newChild, Node oldChild ) : Node用newchild替换oldchild子节点

sort( Function fn, [Object scope] ) : void用指定的fn排序子节点

40、类

action实现一个脱离了容 器的事件,所有它可以在多个容器之间共享,不过好象只有r,

和 支持action接口:),因为容器要实现下面所有的方法setText(string),

setIconCls(string), setDisabled(boolean), setVisible(boolean) and setHandler(function)

方法:

Action( Object config )

构造,config定义为{

disabled : Boolean,//禁止使用

handler : Function,//事件句柄

hidden : Boolean,//隐藏

iconCls : String,//样式类

scope : Object, //handler将在哪个范围内执行

text : String //文本

}

disable() : void

enable() : void

setDisabled( Boolean disabled ) : void禁止/允许

each( Function fn, Object scope ) : void为每个实现了此action的componet应用fn

35

hide() : void

show() : void

setHidden( Boolean hidden ) : void显示/隐藏

setHandler( Function fn, Object scope ) : void

setIconClass( String cls ) : void

setText( String text ) : void重新设置config配置的属性值

示例:

function onItemCheck(item){

("点击事件",("您选择了{0}",));

}

function showMenu(obj){

("点击下拉",pes() )

}

();

var button=new utton({

renderTo:y(),

arrowHandler : showMenu,

handler: onItemCheck,

arrowTooltip : "更多",

text:'按我',

menu:'mainMenu'

});

41、类

简单的按钮类

公有属性:

disabled : Boolean允许?

hidden : Boolean隐藏?

pressed : Boolean按下?

方法 [继承来的忽略]

Button( Object config )

构造可选config{

clickEvent : String, //handler响应的事件,默认是click

cls : String, //样式

disabled : Boolean, //禁止

enableToggle : Boolean,//允许在按下没按下之间切换,添加移除x-btn-pressed样式类

handleMouseEvents : Boolean,//允许使用移入移出按下事件,默认是真

handler : Function, //响应clickEvent定义的事件

hidden : Boolean, //隐藏

icon : String, //图标文件地址,如果修改x-btn-text-icon样式类可以重定义默认icon

iconCls : String, //和icon功能类似,但使用设定了background-image属性的样式定义

menu : Mixed //如果需要,可以为按钮定义菜单

menuAlign : String, //菜单对齐方式,默认值是tl-bl

minWidth : Number, //最小宽度

pressed : Boolean, //是否按下

repeat : Boolean/Object,//是否需要重复定义鼠标按下事件,也可以是一个epeater配

36

置对象

scope : Object, //handler事件的范围

tabIndex : Number, //table键顺序

text : String, //文本

toggleGroup : String, //如果定义一组enableToggle为真且toggleGroup值相同的button对象,这些对象同一时间内将只有一个处于按下状态

tooltip : String/Object, //提示信息,可以是一个字符串或QuickTips的配置对象

tooltipType : String, //可选值"qtip"(默认)或"title"之一

type : String //可选值"submit"/"reset"/"button"(默认)之一

}

focus() : void//得到焦点

getText() : String//取得文本

hasVisibleMenu() : Boolean//有可视的菜单?

hideMenu() : void//隐藏菜单

initComponent() : void//初始化容器

setHandler( Function handler, [Object scope] ) : void//设置事件处理方法

setText( String text ) : void//设置文本

showMenu() : void//显示菜单

toggle( [Boolean state] ) : void//切换按下状态

示例:

"/TR/xhtml1/DTD/">

media="all" />

/*--加入样式背景好直观一点*/

.x-btn-pressed button{

background-color:red;

}

y(function(){

//有菜单的按钮

function onItemCheck(item){

("点击事件",("您选择了{0}",));

}

var menu = new ({

id: 'mainMenu',

items: [

37

{

text: 'menu1',

handler: onItemCheck

},

{

text: 'menu2',

handler: onItemCheck

}]

});

var button=new ({

renderTo:y(),

text:'按我',

menu:'mainMenu'

});

//有状态的探钮

new ({

renderTo:y(),

text:'toggle button ',

enableToggle:true

});

//分组的有状态按钮

new ({

renderTo:y(),

text:'toggle button 1',

enableToggle:true,

toggleGroup:'toggleGroup',

handler: onItemCheck

});

new ({

renderTo:y(),

text:'toggle button 2',

enableToggle:true,

toggleGroup:'toggleGroup',

handler: onItemCheck

});

});

42、utton类

上例中的带菜单按钮还不专业,于是有了utton,专门为带有下拉菜单的按钮设计的

方法:

SplitButton( Object config )构造,

38

config中加入了{

arrowHandler : Function,

arrowTooltip : String

}

setArrowHandler( Function handler, [Object scope] ) : void设置下拉箭头的点击事件

事件:

arrowclick : ( MenuButton this, EventObject e )

使用示例:

比如上例中的菜单按钮可以改为

function onItemCheck(item){

("点击事件",("您选择了{0}",));

}

function showMenu(obj){

("点击下拉",pes() )

}

();

var button=new utton({

renderTo:y(),

arrowHandler : showMenu,

handler: onItemCheck,

arrowTooltip : "更多",

text:'按我',

menu:'mainMenu'

});

43、utton类

这是一个SplitButton的实用子类,用于在多个item之间切换状态,当然它也会带有menu可供选择,也可以直接点击按键在item之间切换

方法:

CycleButton( Object config )

构造,config新增配置项{

changeHandler : Function, //状态切换时的处理事件

items : Array, //items应该是menu item的数组

prependText : String, //前导text

showText : Boolean, //追加item的text到按钮显示

}

getActiveItem() : tem

setActiveItem( tem item, Boolean suppressEvent ) : void

得到/设置活动选项

toggleSelected() : void

切换选择项,相当于点击一次按钮

示例

39

new utton({

renderTo:y(),

showText: true,

prependText: 'View as ',

items: [{

text:'text only',

iconCls:'view-text',

checked:true

},{

text:'HTML',

iconCls:'view-html'

},{

text:'XML',

iconCls:'view-html'

}

],

changeHandler:function(btn, item){

('Change View', );

}

});

44、orm类

对应一个dom中的form,默认是用ajax提交的,如果的确想回传,可以使用如下方式

var myForm. = new orm("form-el-id", {

onSubmit: n,

submit: function() {

().();

}

});

方法:

BasicForm( Mixed el, Object config )

其中config配置为

{

baseParams : Object, //请求时的附加参数,格式为{id: '123', foo: 'bar'}

errorReader : DataReader, //提交时发生验证错误,这个dataReader将会被使用

fileUpload : Boolean, //支持文件上传

method : String, //GET或者POST

reader : DataReader, //load时使用的数据读取器

timeout : Number, //超时时间

trackResetOnLoad : Boolean,//支持使用reset方法恢复原始值

url : String //form要提交的url地址

}

add( Field field1, [Field field2], [Field etc] ) : BasicForm增加字段field1,field2,etc

applyIfToFields( Object values ) : BasicForm

applyToFields( Object values ) : BasicForm用传入的values呼叫f/apply 方法

40

clearInvalid() : BasicForm清除当前basicform中所有的非法信息

doAction( String/Object actionName, [Object options] ) : BasicForm

执行预定义的动作actionName,actionName类似"submit","load",也可以是自定义的动作的名字或一个的实例,options类似如下对象{

url :String,

method :String,

params :String/Object,

success :Function,

failure :Function,

clientValidation :Boolean

}

findField( String id ) : Field在当前form中查找id/dataindex/name等于传入的id的field对象

getEl() : t得到当前form对象的element对象

getValues( Boolean asString ) : Object得到当前form的fields {name:value,name:values}json对象,如果有同名多值,value将是一个数组

isDirty() : Boolean从初始载入后,是否有field被修改过

isValid() : Boolean客户端验证成功?

load( Object options ) : BasicForm等效于doAction('load',options);

loadRecord( Record record ) : BasicForm从一个record对象取值到当前basicform

markInvalid( Array/Object errors ) : BasicForm标志非法,[{id:'fieldId', msg:'The message'},...]这样格式的数组或者{id: msg, id2: msg2}格式的对象

remove( Field field ) : BasicForm从basicform中移除field

render() : BasicForm在basicForm的fields中寻找,利用id属性检查他们,然后用id属性呼叫applyTo方法

reset() : BasicForm重置所有值

setValues( Array/Object values ) : BasicForm设置值,参见getValues

submit( Object options ) : BasicForm提交表单

updateRecord( Record record ) : BasicForm利用当前更新record对象,参见loadRecord

事件:

actioncomplete : ( Form. this, Action action )

actionfailed : ( Form. this, Action action )

beforeaction : ( Form. this, Action action )

45、类

有了form之后,我们当然还需要field

方法:

Field( Object config )

其中config设置为{

autoCreate : String/Object, //一个{tag: "input", type: "text", size: "20", autocomplete: "off"}这样的对象,或者选 择true,就是前面所说的那个固定内置对象

clearCls : String, //,默认x-form-clear-left

cls : String, //默认样式

disabled : Boolean,

fieldClass : String //x-form-field

fieldLabel : String

focusClass : String //x-form-focus

41

hideLabel : Boolean //隐藏前导标签

inputType : String //input type="???"

invalidClass : String //x-form-invalid

invalidText : String

itemCls :String

labelSeparator : String //分隔符

msgFx : String

msgTarget : String

name : String

readOnly : Boolean

tabIndex : Number

validateOnBlur : Boolean //true

validationDelay : Number //250

validationEvent : String/Boolean //KeyUP

value : Mixed

}

构造很麻烦的,但还好我们一般不会直接使用field

clearInvalid() : void清除非法信息

getName() : String

getRawValue() : Mixed

getValue() : Mixed

isDirty() : void

isValid( Boolean preventMark ) : Boolean

markInvalid( String msg ) : void

reset() : void

setRawValue( Mixed value ) : void

setValue( Mixed value ) : void

validate() : Boolean

都很简单也略过了

事件

blur : ( this )

change : ( this, Mixed newValue, Mixed oldValue )

focus : ( this )

invalid : ( this, String msg )

specialkey : ( this, bject e )

valid : ( this )

46、ox类

继承自Field, 复选框

Checkbox( Object config )

构造,其中config{

autoCreate : String/Object,

boxLabel : String,

42

checked : Boolean,

fieldClass : String,//x-form-field

focusClass : String,

}

getValue() : Boolean

initComponent() : void

setValue( Boolean/String checked ) : void

事件

check : ( ox this, Boolean checked )

47、类

继承自ox,单选框

多了一个方法

getGroupValue() : String如果单选框是一组radio 的一部分,取当前选中的值

继承自Field,隐藏字段,无新特性

48、itor类

继承自Field,这个htmleditor功能太简单了,什么人能扩充一下就好了

config定义{

createLinkText : String //

defaultLinkValue : String //

enableAlignments : Boolean

enableColors : Boolean

enableFont : Boolean

enableFontSize : Boolean

enableFormat : Boolean

enableLinks : Boolean

enableLists : Boolean

enableSourceEdit : Boolean

fontFamilies : Array //这个当然要用汉字的字体组成的数组了

}

方法

cleanHtml( String html ) : void

createToolbar( HtmlEditor editor ) : void

execCmd( String cmd, [String/Boolean value] ) : void

getDocMarkup() : void

getToolbar() : r

insertAtCursor( String text ) : void

pushValue() : void

relayCmd( String cmd, [String/Boolean value] ) : void

syncValue() : void

toggleSourceEdit( [Boolean sourceEdit] ) : void

updateToolbar() : void

要提一点的是,要使用HtmlEditor,别忘了先();

43

49、eld类

config{

allowBlank : Boolean //允许为空

blankText : String //如果为空验证错误时的提示文字 ,默认This field is required

disableKeyFilter : Boolean

emptyClass : String

emptyText : String

grow : Boolean // 自动生长?,如果需要,会加宽当前input type="text"

growMax : Number

growMin : Number

maskRe : RegExp //仅允许输入与maskRe匹配的按键

maxLength : Number

maxLengthText : String //超出最大长度时提示文本

minLength : Number

minLengthText : String //不够最小长度时提示信息

regex : RegExp //正则匹配

regexText : String //提示

selectOnFocus : Boolean

validator : Function //自定义验证方法,接受当前字段的值,如果合法,返回真,反之返回自定义信息

vtype : String // 中定义的vtype类型名,支持简单的类型验证

vtypeText : String//如果不是,则提示

}

方法:

TextField( Object config )构造

autoSize() : void自动尺寸

reset() : void重置

selectText( [Number start], [Number end] ) : void选择文本

validateValue( Mixed value ) : Boolean验证值

50、Field类

继承自eld,因为eld虽然强大,但写起来的确还是有点麻烦,后面的类都继承自eld,没有自定义的方法,属性和事件

config定义为{

allowDecimals : Boolean //true

allowNegative : Boolean //true

baseChars : String //''

decimalPrecision : Number //精度,默认值2

decimalSeparator : String //小数分隔符

fieldClass : String //默认样式为x-form-field x-form-num-field

maxText : String

maxValue : Number //默认_VALUE

minText : String

minValue : Number //默认VE_INFINITY

nanText : String //NaN时显示?

44

}

51、ea类

config{

autoCreate : String/Object //{tag: "textarea", style. "width:100px;height:60px;",

autocomplete: "off"}

growMax : Number //1000

growMin : Number //60

preventScrollbars : Boolean //如果为真等于设置overflow: hidden,默认为false

}

52、rField类

这个类只要text旁边加了个下拉按钮,要自己实现onTriggerClick

config{

autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete:

"off"}

hideTrigger : Boolean //隐藏trigger,就是右边的那个下拉选择框

triggerClass : String

}

事件

onTriggerClick( EventObject e ) : void

53、eld类

继承自TriggerField,用于日期选择

config{

altFormats : String //转换用户输入到日期时的格式,默认'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d'

autoCreate : String/Object //{tag: "input", type: "text", size: "10", autocomplete:

"off"}

disabledDates : Array //禁止选择的日期:例

["^03","04/../2006","09/16/2003"],不让选3月,2006年4月,2003年9月16

disabledDatesText : String //不让选总得给个理由吧

disabledDays : Array //不让选星期几,例[0,6],不让选周六,周日

disabledDaysText : String //周日要休息,这就是理由

format : String //显示时的格式

invalidText : String //验证非法时的提示

maxText : String

maxValue : Date/String

minText : String

minValue : Date/String

triggerClass : String

}

方法,除了构造,多了两个顾名思义的方法

DateField( Object config )

getValue() : Date

45

setValue( String/Date date ) : void

54、ox类

config{

allQuery : String //''

autoCreate : Boolean/Object //{tag: "input", type: "text", size: "24", autocomplete:

"off"}

displayField : String //显示字段

editable : Boolean //true当然就是combobox了,如果不可编辑就是一个select了

forceSelection : Boolean

handleHeight : Number //如果resiable为真时,设置

hiddenName : String

lazyInit : Boolean //除非得到焦点才开始初始化列表,默认为真

lazyRender : Boolean //除非请求,才开始输出,默认为假

listAlign : String //对齐方式,参见o,默认为'tl-bl'

listClass : String

listWidth : Number

loadingText : String //仅当mode = 'remote'时调用数据时显示的文本

maxHeight : Number //300

minChars : Number //最少输入多少个字开始响应,远程时默认为4,本地为0,如果不可编辑则此值无效

minListWidth : Number

mode : String //可选值local/remote之一,从本地还是远程取数据

pageSize : Number //在远程模式下,如果此值大于0会在底部显示一个翻页工具条

queryDelay : Number //查询延时,远程默认为500,本地10

queryParam : String //查询参数,默认为query

resizable : Boolean

selectOnFocus : Boolean

selectedClass : String

shadow : Boolean/String //True或"sides"为默认风格, "frame" for 4-way shadow, and

"drop" for bottom-right

store :

title : String

transform. Mixed //对应一个select元素,可以将select转为combobox对象

triggerAction : String //点击按钮时的动作.默认为query

triggerClass : String

typeAhead : Boolean //false

typeAheadDelay : Number //250

valueField : String

valueNotFoundText : String //值不存在时的提示信息

}

属性

view : ew

方法

46

ComboBox( Object config )构造

clearValue() : void清除所有文本/值对

collapse() : void

expand() : void收起/展开下拉列表

doQuery( String query, Boolean forceAll ) : void执行查询

getValue() : String选择当前字段的值

isExpanded() : void下拉列表是展开的?

select( Number index, Boolean scrollIntoView ) : void选中第index列表项

selectByValue( String value, Boolean scrollIntoView ) : Boolean选中值为value的列表项

setEditable( Boolean value ) : void设editable属性为value

setValue( String value ) : void设置当前值为

事件

beforequery : ( Object queryEvent )

beforeselect : ( ox combo, record, Number index )

collapse : ( ox combo )

expand : ( ox combo )

select : ( ox combo, record, Number index )

55、eld类

继承自combobox,用于选择时间

config{

altFormats : String //

format : String

increment : Number //时间增长间隔,默认15

invalidText : String

maxText : String

maxValue : Date/String

minText : String

minValue : Date/String

}

总 的来说对input type='text' select 这样的输入标签都有对应的类,并对有些标签做了简单的扩展,当然很重要的一点,漂亮多了,vtype属性也方便了处理,建议有兴趣的同胞对 和itor做一些扩展

form中还有两个类,比如下例中的FormPanel和FieldSet,

都继承自panel,所以会放在panel中解释

综合示例

();

var arr=[ [1, '本.拉登'], [2, '笨.拉登'],[3, '笨.拉灯'] ];

var reader = new eader(

{id: 0},

[

{name: 'value'},

{name: 'key'}

47

]);

var store=new ({

reader:reader

});

ta(arr);

var htmleditor=new itor({

fieldLabel:'htmleditor',

width:450,

fontFamilies:['宋体','隶书'],

name:'editor',

id:'editor'

});

var form. = new nel({

labelWidth: 75,

url:'',

frame.:true,

width: 800,

defaultType: 'textfield',

items: [

new ox({ //checkbox

fieldLabel:'checkbox',

name:'cb',

checked:true,

boxLabel:'checkbox'

}),

new et({ //radio

border:false,

title:'radio',

items:[

new ({

labelSeparator:'',

name:'radio',

checked:true,

boxLabel:'radio 1'

}),

new ({

labelSeparator:'',

name:'radio',

checked:true,

boxLabel:'radio 2'

})

]

}),

new ({ //hidden

name:'hidden'

48

}),

htmleditor,

new eld({ //text

fieldLabel:'text',

name:'text',

grow:true,

allowBlank:false,

blankText : "这个字段最好不要为空",

maskRe:/[a-zA-z]/gi

}),

new Field({ //NumberField

allowNegative:true,

fieldLabel:'number',

name:'number'

}),

new ea({ //TextArea

fieldLabel:'textarea',

name:'textarea'

}),

new rField({ //TriggerField

fieldLabel:'TriggerField',

name:'TriggerField'

}),

new ox({ //select

fieldLabel:'select',

editable:false,

triggerAction: 'all',

valueField:'value',

displayField:'key',

mode: 'local',

store:store

}),

new ox({ //combobox

fieldLabel:'ComboBox',

displayField:'key',

mode: 'local',

store:store

}),

new eld({ //DateField

fieldLabel:'DateField',

format:'Y-m-d',

disabledDays:[0,6]

}),

new eld({//TimeField

fieldLabel:'TimeField',

mode: 'local',

49