ext核心API详解

技术2025-02-19 11

http://hi.baidu.com/j2me/profile 1

EXT核心API详解(一)-Ext 1

EXT核心API详解(二)-Array/Date/Function/Number/String 5

EXT核心API详解(三)-Ext.Element 9

EXT核心API详解(四)-Ext.DomQuery/DomHelper/Template 21

EXT核心API详解(五)- 24

EXT核心API详解(六)-Ext.Fx 27

EXT核心API详解(七)- 30

EXT核心API详解Ext.data(八) -Connection/Ajax/Record 35

EXT核心API详解Ext.data(九)-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy 38

EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader 40

EXT核心API详解Ext.data(十一)-Store 44

EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore 49

EXT核心API详解Ext.data(十三)-Tree/Node 51

EXT核心API详解Ext.widgets(十四)-Button,SplitButton,CycleButton 54

EXT核心API详解Ext.widgets(十五)-form(上) 61

EXT核心API详解Ext.widgets(十六)-form(下) 67

EXT核心API详解Ext.menu.Menu(十七) 74

EXT核心API详解Ext.Toolbar(十八) 80

EXT核心API详解Ext.widgets(十九)-grid(1) 83

EXT核心API详解Ext.widgets(二十)-grid(2) 89

http://hi.baidu.com/j2me/profile

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参数,也将拷贝其属性到objapplyIf( 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参数是要重载的方法列表,详见overridefly( 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类型,如果不为以下列举值之一则返回falsestring/number/boolean/function/object/array/regexp/element/nodelist/textnode/whitespace

EXT核心API详解(二)-Array/Date/Function/Number/String

Array类indexOf( Object o ) : Numberobject是否在数组中,找不到返回-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 至 31D 三字母的星期名 Mon 至 Sunj 一位数的日期 1 至 31l 完整的星期名 Sunday 至 SaturdayS 日期的英文顺序刻词尾,两个字符 st, nd, rd or th.w 一周中的第几天 0 (星期天) 至 6 (星期六)z 一年中的第几天 0 至 364 (闰年365 )W ISO-8601 星期数, 周一算一个星期的开始 1 至 53F 月的完整英文名 January 至 Decemberm 月,以0前导 01 至 12M 三字母的简写月名 Jan 至 Decn 月 1 至 12t 本月有多少天 28 至 31L 是否闰年 1/0Y 完整的年份例: 1999 或 2003y 年的后两位例: 99 或 03a 上午/下午小写 am 或 pmA 上午/下午大写 AM 或 PMg 小时/12小时制 1 至 12G 小时/24小时制 0 至 23h 小时/12小时制 01 至 12H 小时/24小时制 00 至 23i 分钟 00 至 59s 秒 00 至 59u 毫秒 001 至 999O 时区,与格林威治标准时间之差例: +0200T 时区简写例: 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可以看作一个简化版的createDelegatecreateCallback==>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创建组合方法,执行原方法+fcndefer( 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后呼叫fnaddListener( String eventName, Function fn, [Object scope], [Object options] ) : void定义事件侦听,eventName:事件名,fn:事件处理方法,scrope:范围,其中options的定义比较复杂,可以包含以下属性scope {Object} : 处理fn的范围delegate {String} : 一个简单选择器(过滤目标或寻找目标的子孙节点)stopEvent {Boolean} : 阻止事件,等于preventDefault+stopPropagationpreventDefault {Boolean} : 阻止默认活动stopPropagation {Boolean} : 阻止事件冒泡normalized {Boolean} :设为flase将允许浏览器事件替代Ext.EventObjectdelay {Number} : 延时多少毫秒后发生single {Boolean} : 只运行一次buffer {Number} : 在Ext.util.DelayedTask中预定事件当然,还可能自定义参数以传入functionalignTo( 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.35Function:完成后的回叫方法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/scrollappendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element添加子元素el(el须已存在)appendTo( Mixed el ) : Ext.Element将当前元素添加到elapplyStyles( String/Object/Function styles ) : Ext.Element应用样式,styles是"width:100px"这样的字符串或{width:"100px"}这样的对象,function是指返回这样的字串和对象的函数,这是一个没有用的批示,因为任何传参的地方都可以是返回要求类型的function.另见setStyleautoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : Ext.Element自适应高度,参数都是老相识了,惟一需要注意的是这个方法使用了setTimeout,高度不会马上变更blur() : Ext.Element失去焦点,忽略所有的异常boxWrap( [String class] ) : Ext.Element用一个指定样式class的div将当前元素包含起来,class默认值为x-boxcenter( [Mixed centerIn] ) : voidalignTo的简华版.相当于alignTo(centerIn || document, 'c-c'),当前元素的中心对齐到centerIn元素的中心child( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element依selector选择子孙节点,依returnDom不同批示返回html元素还是ext元素,未定义或false时返回Ext.Elementclean( [Boolean forceReclean] ) : void清除无用的空白文本节点(我喜欢这个想法)clearOpacity() : Ext.Element清除当前元素样式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/-khtml-opacityclearPositioning( [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当前元素中是否存在elcreateChild( 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或idmatchBox:是否对齐createShim() : Ext.Element在当前元素之前创建一个classname为ext-shim的iframe,有什么用?down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element通过样式选择器selector选择子孙节点enableDisplayMode( [String display] ) : Ext.ElementsetVisibilityMode的简便方法findParent( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement通过简单选择器selector寻找祖先节点 ,直到maxDepth(元素maxDepth默认为10,也可以是指定的DOM 节点),找不到返回nullfindParentNode( 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方法,默认为cgetAttributeNS( 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见getComputedHeightgetFrameWidth( String sides ) : Number得到sides定义的border宽度和padding定义的宽度之和,side定义见getBorderWidthgetHeight( [Boolean contentHeight] ) : Number返回元素的offsetHeightgetLeft( Boolean local ) : Number得到横坐标getMargins( [String sides] ) : Object/Number如果没有定义sides,则返回一个含有{left,top,width,height}对象,反之返回side指定的宽度,side定义见getBorderWidthgetOffsetsTo( 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() : NumbergetXY() : ArraygetY() : 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.DDinitDDProxy( String group, Object config, Object overrides ) : Ext.dd.DDProxyinitDDTarget( String group, Object config, Object overrides ) : Ext.dd.DDTarget这个要放到 Ext.dd去专门搞了,用于拖曳insertAfter( Mixed el ) : Ext.ElementinsertBefore( Mixed el ) : Ext.ElementinsertFirst( Mixed/Object el ) : Ext.Element在DOM中el元素之前之后...插入当前元素insertHtml( String where, String html, Boolean returnEl )插入html内容 where 可选beforeBegin, afterBegin, beforeEnd, afterEndinsertSibling( Mixed/Object/Array el, [String where], [Boolean returnDom] ) :插入或创建el做为当前元素的兄弟节点,where可选before/after,默认为beforeis( String selector ) : Boolean验证当前节点是否匹配简单选择器selectorisBorderBox()测试不同的样式规则以决定当前元素是否使用一个有边框的盒子isDisplayed() : Boolean只要不是指定display属性none都会返回真isMasked() : Boolean仅有当前元素有mask并且可见时为真,mask译为蒙片?就是有些输入框没得到值之前会有一行模糊的提示的那种东西isScrollable() : Boolean可以滚动?isVisible( [Boolean deep] ) : Boolean可见?last( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement见firstload( 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详见addListenerposition( [String pos], [Number zIndex], [Number x], [Number y] ) : void初始化当前元素的位置 pos可选择relative/absolute/fixedprev( [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用当前元素替换elreplaceClass( 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参数见movescrollIntoView( [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.ElementsetLeft( String left ) : Ext.ElementsetRight( String right ) : Ext.ElementsetTop( String top ) : Ext.ElementsetLeftTop( 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.ElementsetWidth( Number width, [Boolean/Object animate] ) : Ext.ElementsetSize( 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定义见getRegionsetStyle( 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.ElementsetXY( Array pos, [Boolean/Object animate] ) : Ext.ElementsetY( 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解除事件侦听，参见 removeListenerunclip() : 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是否匹配selectorselect( 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.ElementcreateTemplate( Object o ) : Ext.Template由o创建一个新的Ext.Template对象，详见 Ext.TemplateinsertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertBefore( 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 ) : 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的内容 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.ElementinsertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element这组方法提供由 value产生的html 代码，并添加到dom 做为el的最后一个子节点/下一个兄弟节点/前一个兄弟节点/第一个子节点values解释参见applyTemplateapply() : voidapplyTemplate( Object values ) : Stringapply是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] ) : voidonDocumentReady( Function fn, [Object scope], [boolean options] ) : voidremoveListener( String/HTMLElement el, String eventName, Function fn ) :un( String/HTMLElement el, String eventName, Function fn ) : Boolean参见ExtonWindowResize( 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);//orExt.EventManager.on("myDiv", 'click', handleClick);Ext.EventManager.addListener("myDiv", 'click', handleClick);getCharCode() : NumbergetKey() : Number在非webkit|khtml类型网页中这两个方法是一样的，得到按键的值getPageX() : NumbergetPageY() : NumbergetXY() : Array得到事件坐标getRelatedTarget() : HTMLElement得到关联目标?我总是得到nullgetTarget( [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+stopPropagationstopPropagation() : void阻止事件冒泡within( Mixed el, [Boolean related] ) : Boolean如果事件的目标是el或者它的子节点将返回真Ext.CompositeElement类基础的复合元素类,为容器中每个元素创建一个Ext.Element对象虽然不是继承自Ext.Element，但事实上它几乎支持Element类的所有方法例:var els = Ext.select("#some-el div.some-class", true);els.setWidth(100);add( String/Array els ) : CompositeElement添加 css选择器els匹配的元素或元素组成的数组到当前对象clear() : void清除所有元素contains() : Boolean应该是contains(Mixed el):Boolean,当前复合元素中是否含有eleach( Function fn, [Object scope] ) : CompositeElement通过el,this,index参数为每个元素调用fnfill( String/Array els ) : CompositeElementclear()& add(els)filter( String selector ) : CompositeElement过滤first() : Ext.Element第一个元素getCount() : Number//元素的数量indexOf() : Boolean同contains一样应该有个Mixed参数item( Number index ) : Ext.Element第index个元素last() : Ext.Element最后一个元素removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement删除el元素replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement替换Ext.CompositeElementLite由Ext.CompositeElement继承而来，重写了一些方法，但没看出与父类有什么不同addElements /invoke /item /addListener /each /indexOf /replaceElement

EXT核心API详解(六)-Ext.Fx

Ext.Fx类对于我这样的懒鬼而言，Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类定义了一些常用的特效方法,不妨自己多动手试试下面的方法，很有趣的fadeIn( [Object options] ) : Ext.Element渐显 options参数有以下属性callback:Function 完成后的回叫方法scope:Object 目标easing:String 行为方法默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的easeNone:匀速easeIn:开始慢且加速easeOut:开始快且减速easeBoth:开始慢且减速easeInStrong:开始慢且加速,t的四次方easeOutStrong:开始快且减速,t的四次方easeBothStrong:开始慢且减速,t的四次方elasticIn:elasticOut:elasticBoth:backIn:backOut:backBoth:bounceIn:bounceOut:bounceBoth:太多,慢慢体会吧afterCls:String 事件完成后元素的样式duration:Number 事件完成时间（以秒为单位）remove:Boolean 事件完成后元素销毁?useDisplay:Boolean 隐藏元素是否使用display或visibility属性?afterStyle.:String/Object/Function 事件完成后应用样式block:Boolean 块状化?concurrent:Boolean 顺序还是同时执行？stopFx ：Boolean 当前效果完成后随合的效果是否将停止和移除fadeOut( [Object options] ) : Ext.Element渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度例:el.fadeIn({duration:5,endOpacity:0.7});frame( [String color], [Number count], [Object options] ) : Ext.Element边框变亮扩展然后渐隐例:el.frame("ff0000", 10, { duration: 3 })ghost( [String anchor], [Object options] ) : Ext.Element渐渐滑出视图,anchor定义tl 左上角(默认)t 上居中 tr 右上角l 左边界的中央c 居中r 右边界的中央bl 左下角b 下居中br 右下角例:el.ghost('b', { easing: 'easeOut', duration: .5 remove: false, useDisplay: false});hasActiveFx() : Boolean指示元素是否当前有特效正在活动hasFxBlock() : Boolean是否有特效阻塞了highlight( [String color], [Object options] ) : Ext.Element高亮显示当前元素例:el.highlight("ffff9c", { attr: "background-color", //can be any valid CSS property (attribute) that supports a color value endColor: (current color) or "ffffff", easing: 'easeIn', duration: 1});pause( Number seconds ) : Ext.Element暂停puff( [Object options] ) : Ext.Element吹，吹，吹个大气球，元素渐大并隐没例:el.puff({ easing: 'easeOut', duration: .5, remove: false, useDisplay: false});scale( Number width, Number height, [Object options] ) : Ext.Element缩放例:el.scale( [element's width], [element's height], { easing: 'easeOut', duration: .35});sequenceFx()排队特效shift( Object options ) : Ext.Element位移,并可重置大小,透明度等例:el.shift({ width: [element's width], height: [element's height], x: [element's x position], y: [element's y position], opacity: [element's opacity], easing: 'easeOut', duration: .35});slideIn( [String anchor], [Object options] ) : Ext.ElementslideOut( [String anchor], [Object options] ) : Ext.Element滑入/滑出例:el.slideIn('t', { easing: 'easeOut', duration: .5});stopFx() : Ext.Element停止特效switchOff( [Object options] ) : Ext.Element收起并隐没例:el.switchOff({ easing: 'easeIn', duration: .3, remove: false, useDisplay: false});syncFx() : Ext.Element异步特效

EXT核心API详解(七)-

Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetrics/XTemplate

Ext.KeyNavExt的keyNav类能为Ext.Element元素提供简单的按键处理方法例:var el=Ext.get("textarea");new Ext.KeyNav(el, { "left" : function(e){ alert("left key down"); }, scope : el });它的行为与KeyMap类似，但功能比KeyMap要弱小的多，只能处理以下已定义键enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end同情一下KeyNav方法只有三个,不用多解释KeyNav( Mixed el, Object config )disable() : voidenable() : voidExt.KeyMap类则强悍的多,其中最重要的当然是对按键的定义更灵活例:上例用KeyMap来写可能是var el=Ext.get("textarea");new Ext.KeyMap(el, { key:Ext.EventObject.LEFT, fn: function(e){ alert("left key down"); }, scope : el });方法KeyMap( Mixed el, Object config, [String eventName] )构造,与KeyNav也相似，但更灵活它是{key: String/Array, //可以是数字，字符，也可以是Ext.EventObject.LEFT这样的助记符,还能是他们组成的数组shift: Boolean, //ctrl键按下?ctrl: Boolean,alt : Boolean,fn : Function, //回叫方法scope: Object //范围}这样的对象或它们组成的数组比如{key: 10},{key: [10,13]},{key:'/t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定义addBinding( Object/Array config ) : void增加新的绑定动作 config参见构造disable() : voidenable() : voidisEnabled() : Boolean允许，静止和状态查询on( Number/Array/Object key, Function fn, [Object scope] ) : void只添加一个处理时addBinding的快捷方式,但个人感觉并没有简单到哪儿去。Ext.util.JSON轮到大名鼎鼎的JSON了，可惜Ext提供的JSON对象功能好弱小，只有encode主decode两个方法而且只能编码String/Array/Date,至少也要搞个 xml2json/json2xml方法呀Ext.util.Format主要提供了一些格式化方法capitalize( String value ) : String首字母大写date( Mixed value, [String format] ) : String格式化日期输出,还是Date.format方法好用dateRenderer( String format ) : Function返回一个利用指定format格式化日期的方法defaultValue( Mixed value, String defaultValue ) : String如果value未定义或为空字符串则返回defaultValueellipsis( String value, Number length ) : String如果value的长度超过length的,取前length-3个并用...替代，对中国人来说还是垃圾功能，用的字符串长度不是字节长度fileSize( Number/String size ) : String简单的格式化文件长度为 xxxbytes xxxKB xxxMB,没有GB哟htmlEncode( String value ) : StringhtmlDecode( String value ) : StringHTML编码解码,将& < > “替换为&<>"lowercase( String value ) : String将value转换为全小写stripScripts( Mixed value ) : String去除脚本标签stripTags( Mixed value ) : String去除HTML标签substr( String value, Number start, Number length ) : String取子字符串trim( String value ) : String去除开头和结尾的空格undef( Mixed value ) : Mixed如果value未定义,返回空字符串，反之返回value本身uppercase( String value ) : String转为全大写usMoney( Number/String value ) : String转为美元表示Ext.util.DelayedTask提供一个setTimeout的简单替代方法公开的方法也只有三个DelayedTask( [Function fn], [Object scope], [Array args] )delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) :cancel() : void简单的示例用法如果var task=new Ext.util.DelayedTask(Ext.emptuFn);task.delay(1000);task.cancel();Ext.util.TaskRunner增强版的DelayedTask,能提供多线程的定时服务，例:var task = { run: function(){ Ext.fly('clock').update(new Date().format('g:i:s A')); }, interval: 1000}var runner = new Ext.util.TaskRunner();runner.start(task);四个方法都很简单TaskRunner( [Number interval] )start( [Object task] ) : Objectstop( Object task ) : ObjectstopAll() : voidExt.util.TextMetrics这个类主要是为了准备的得到块状化文本正确的高度和宽度例:var metrics=Ext.util.TextMetrics.createInstance('div');metrics.setFixedWidth(100);var size=metrics.getSize("中华人民共和国中华人民共和国中华人民共和国中华人民共和国");Ext.MessageBox.alert("getsize",String.format("width:{0}px/theight:{1}px",size.width,size.height))方法bind( String/HTMLElement el ) : void绑定到elcreateInstance( String/HTMLElement el, [Number fixedWidth] ) : Ext.util.TextMetrics.Instance为el创建TextMetrics实例getHeight( String text ) : NumbergetSize( String text ) : ObjectgetWidth( String text ) : Number得到尺寸measure( String/HTMLElement el, String text, [Number fixedWidth] ) : Object测算文本text在el中将要占用的尺寸setFixedWidth( Number width ) : void设置指定的宽度Ext.XTemplate增强型模板，支持更多功能了，虽然方法不多，但用起来来还真的很麻烦，但并不建议大家学习这样的自定义语法，不如用xslt另外这个Xtemplate虽然命名空间在Ext之下，但源文件却是放在util目录中的XTemplate( String/Array html )XTemplate.from( String/HTMLElement el ) : Ext.XTemplateapply() : voidapplyTemplate( Object values ) : Stringcompile() : Function这些方法Ext.Template中都有说明，

EXT核心API详解Ext.data(八) -Connection/Ajax/Record

Ext.data.Connection访问指定的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, //请求urlparams:Object/String/Function, //以post方法请求时传递的参数method:string , //Get/Postcallback:Function, //回叫方法,不管是成功还是失败都会呼叫这个方法,有三个参数,由options传入的options参数,success:Boolean,成功? response:Object, 含有返回数据的XMLHttpRequest对象success:Function, //成功时回叫,第一个参数为XMLHttpRequest对象,第二个参数传入指定的optionsfailure:Function, //失败时回叫,参数同successscope:Object, //范围form.:Object/String, //一个form对象或它的id,可以由此自动生成参数paramsisUpload:Boolean, //文件上传?通常可以自动检测headers:Object, //要自定义的请求头信息xmlData:Object //一个xml文档对象,它将通过url附加参数的方式发起请求disableCaching:Boolean //是否禁用缓存?默认为真}

Ext.Ajax由Ext.data.Connection 继承而来,方法和父类一模一样,但使用起来更简单一些,是一个全局惟一静态类示例:Ext.Ajax.request({ url: 'foo.php', success: someFn, failure: otherFn, headers: { 'my-header': 'foo' }, params: { foo: 'bar' }});

Ext.Ajax.request({ form. 'some-form', params: 'foo=bar'});

//所有的Ext.Ajax请求都会加个这个默认的头Ext.Ajax.defaultHeaders = { 'Powered-By': 'Ext'};

//所有的Ext,Ajax在发起请求前都会调用showSpinnerExt.Ajax.on('beforerequest', this.showSpinner, this);

Ext.data.Record基本上可以理解为.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 //排序类型,Ext.data.SortTypes成员之一,参见sortTypessortDir : String //正序倒序 ASC/DESC值之一convert : Function //转换函数,这个功能很有用，可自定义，接收当前value返回处理后的valuedateFormat : String //日期格式化字符串,convert:function的一个特例，使用Date.parseDate方法转换当前日期}

endEdit() : void结束修改

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

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

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

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

EXT核心API详解Ext.data(九)-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy

Ext.data.DataProxy数据代理类是一个纯虚类，主要用于生成Ext.data.Record对象，没有公开的属性和方法，只是归定子类需要处理三个事件beforeload : ( Object This, Object params )load : ( Object This, Object o, Object arg )loadexception : ( Object This, Object o, Object arg, Object e )事实上参数也是子类自定义的Ext.data.HttpProxyapi文档中说httpProxy是从object继承来的，事实上source中它和下面的Ext.data.MemoryProxy/Ext.data.ScriptTagProxy都继承于DataProxyHttpProxy用于远程代理,而且服务端返回信息时必须指定Content-Type属性为"text/xml".HttpProxy( Object conn )构造一个HttpProxy对象,参数可以是一个类似于{url: 'foo.php'}这样的json对象,也可以是一个Ext.data.Connection对象,如果参数没有指定，将使用Ext.Ajax对象将被用于发起请求getConnection() : Connection得到当前连接对象load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void从配置的connection对象得到record数据块，并激发callbackparams: 发起http请求时所要传递到服务端的参数DataReader: 见DataReadercallback: 回叫方法,第一个参数为接收到的信息,第二个参数为arg,第三个是成功标志scope: 范围arg: 这儿的参数将会传递给回叫函数callback使用示例:var proxy=new Ext.data.HttpProxy({url:'datasource.xml'}); //关于reader将会在Ext.data.DataReader中讲解 var reader = new Ext.data.XmlReader({ totalRecords: "results", record: "row", id: "id" }, [ {name: 'name', mapping: 'name'}, {name: 'occupation'} ]); //定义回叫方法 var metadata; function callback(data,arg,success){ if(success){ metadata=data; } } //从connection配置的url中利用reader将返回的xml文件转为元数据,并传递给callback proxy.load( null,reader,callback,this);Ext.data.MemoryProxyMemoryProxy( Object data )构造load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void取数据，和HttpProxy类似,只是params参数没有被使用使用示例var proxy=new Ext.data.MemoryProxy([ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]); var reader = new Ext.data.ArrayReader({id: 0}, [{name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]);var metadata;function callback(data,arg,success){ metadata=data;}proxy.load( null,reader,callback,this);Ext.data.ScriptTagProxy这个类和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}abort() : void放弃

EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader

Ext.data.DataReader纯虚类,从数据源得到结构化数据转换为元数据对象,对象包含Record的集合,一般用做Store对象的元数据,具有如下格式{totalRecord:int,records:Array of Ext.data.Record}具体使用参见三个子类Ext.data.ArrayReader/Ext.data.JsonReader/Ext.data.XmlReader方法DataReader( Object meta, Object recordType )构造Ext.data.ArrayReader用于读数组到一个元数据对象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 Ext.data.ArrayReader(//以第一个元素做为recordid {id: 0}, //定义数组到record的映射关系 [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]);//生成元数据var data=reader.readRecords(arr);Ext.data.JsonReader用于将一个json对象转换为元数据对象JsonReader( Object meta, Object recordType )JsonReader的构造参数meta可以有更多选择,{id : String,root : String,successProperty : String,totalProperty : String}都是对应json对象的属性名read( Object response ) : Object从一个response对象返回,response.responseText属性应仅含有一个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 Ext.data.JsonReader( { totalProperty: "results",//totalRecords属性由json.results得到 root: "rows", //构造元数据的数组由json.rows得到 id: "id" //id由json.id得到 },[ {name: 'name', mapping: 'name'}, {name: 'occupation'} //如果name与mapping同名,可以省略mapping ] ) var data=reader.readRecords(json);Ext.data.XmlReaderxmlreader对象当然是为xml而准备的构造:XmlReader( Object meta, Mixed recordType )meta与jsonreader类似, meta是一个{ id : String, record : String, success : String, totalRecords : String}对象,只是这些字符串都是相对于文档根目录的domquery路径read( Object response ) : ObjectreadRecords( Object doc ) : Object....var str=["<?xml version=/"1.0/" encoding=/"utf-8/" ?>", "<dataset>","<results>2</results>","<row>", "<id>1</id>", "<name>Bill</name>", "<occupation>Gardener</occupation>","</row>","<row>", "<id>2</id>", "<name>Ben</name>", "<occupation>Horticulturalist</occupation>","</row>","</dataset>"].join("");//生成xmldocument对象var xmlDocument;if(Ext.isIE){ xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument") xmlDocument.async=false; xmlDocument.resolveExternals = false; xmlDocument.loadXML(str) }else{ xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");}//然后开始...和其它两个reader一样的用法,只是这儿换了一种写法,recordtype也可以是一个record对象var record = Ext.data.Record.create([ {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 Ext.data.XmlReader({ totalRecords: "results", record: "row", //row是节点选择器 id: "id" }, record);var data=reader.readRecords(xmlDocument);

EXT核心API详解Ext.data(十一)-Store

2008-07-09 09:56

Ext.data.Storestore是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表方法:不列举继承来的方法Store( Object config )构造,config定义为{autoLoad : Boolean/Object, //自动载入baseParams : Object, //只有使用httpproxy时才有意义data : Array, //数据proxy : Ext.data.DataProxy,//数据代理pruneModifiedRecords : boolean,//清除修改信息reader : Ext.data.Reader, //数据读取器remoteSort : boolean, //远程排序?sortInfo : Object, //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象url : String, //利用url构造HttpProxy}add( Ext.data.Record[] records ) : void增加记录records 到storeaddSorted( Ext.data.Record 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和idfind( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number找到符合条件的第一条记录,参数同filterfindBy( Function fn, [Object scope], [Number startIndex] ) : Number参见filterBygetAt( Number index ) : Ext.data.RecordgetById( String id ) : Ext.data.Record依充号/id得到record对象getCount() : void得到记录数getModifiedRecords() : Ext.data.Record[]得到修改过的记录集getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Record[]得到指定范围的记录集合getSortState() : void得到排序状态:显然不是void而是返回一个排序对象,同sortInfo一样的结构{field: "fieldName", direction: "ASC|DESC"}getTotalCount() : void这个对于翻页信息还是很有用的indexOf( Ext.data.Record record ) : NumberindexOfId( String id ) : Number由记录或id得到序号insert( Number index, Ext.data.Record[] records ) : void在指定的位置插入记录,并引发add事件isFiltered() : Boolean当前设置了过滤器则返回真load( Object options ) : void由指定的Proxy使用指定的reader读取远程数据options定义为{ params :Object, //请求url需要附加的参数 callback :Function//回叫方法,接收三个参数 //r : Ext.data.Record[] //返回的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] ) : MixedCollectionqueryBy( Function fn, [Object scope] ) : MixedCollection查询,参数和find类似,但返回所有符合条件的record,而不是第一个符合条件记录的序号rejectChanges() : void放弃所有的变更reload( [Object options] ) : void重新载入,相当于 load(options,false),如果连options都没有传入,则取最后一次load时使用的参数remove( Ext.data.Record 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, Ext.data.Record[] records, Number index )beforeload : ( Store this, Object options )clear : ( Store this )datachanged : ( Store this )load : ( Store this, Ext.data.Record[] records, Object options )loadexception : ()metachange : ( Store this, Object meta. )remove : ( Store this, Ext.data.Record record, Number index )update : ( Store this, Ext.data.Record record, String operation )看名字都很简单,参数也不复杂,略过用例//得到远程json对象//其中jsoncallback.js内容为//{ 'results': 2, 'rows': [// { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },// { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]//}//定义proxy var proxy=new Ext.data.HttpProxy(...{url:'jsoncallback.js'});//定义reader var reader=new Ext.data.JsonReader( ...{ totalProperty: "results",//totalRecords属性由json.results得到 root: "rows", //构造元数据的数组由json.rows得到 id: "id" //id由json.id得到 },[ ...{name: 'name', mapping: 'name'}, ...{name: 'occupation'} //如果name与mapping同名,可以省略mapping ] )//构建Store var store=new Ext.data.Store(...{ proxy:proxy, reader:reader });//载入store.load();示例2//得到远程xml文件//其中xml文件内容为<?xml version="1.0" encoding="utf-8" ?><dataset><results>2</results><row> <id>1</id> <name>Bill</name> <occupation>Gardener</occupation></row><row> <id>2</id> <name>Ben</name> <occupation>Horticulturalist</occupation></row></dataset>var proxy=new Ext.data.HttpProxy(...{url:'datasource.xml'}); var reader = new Ext.data.XmlReader(...{ totalRecords: "results", record: "row", id: "id" }, [ ...{name: 'name', mapping: 'name'}, ...{name: 'occupation'} ]); var store=new Ext.data.Store(...{ proxy:proxy, reader:reader });store.load();示例3//从本地数组得到var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ];var reader = new Ext.data.ArrayReader( ...{id: 0}, [ ...{name: 'name', mapping: 1}, ...{name: 'occupation', mapping: 2} ]); var store=new Ext.data.Store(...{ reader:reader }); store.loadData(arr);

EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore

Ext.data.GroupingStore继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用GroupingStore时必须指定sortInfo信息增加了配置属性groupField : String//用于分组的字段groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假remoteGroup : Boolean//远程排序当然也会多一个group方法groupBy( String field, [Boolean forceRegroup] ) : void顾名思义都是重新排序用的

下面是个简单的示例

//GridPanel以后会讨论,这儿使用它是为了直观的表现GroupingStore var grid = new Ext.grid.GridPanel({ ds: store, columns: [ {header: "name", width: 20, sortable: true,dataIndex: 'name'}, {header: "occupation", width: 20,sortable: true, dataIndex: 'occupation'} ], view: new Ext.grid.GroupingView({ forceFit:true, groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})' }), frame.:true, width: 700, height: 450, collapsible: true, animCollapse: false, title: 'Grouping Example', renderTo: 'Div_GridPanel' });

Ext.data.JsonStore也是Store子类,目标是更方便的使用json对象做数据源构造中多了fields,root,用法如下例所示/**//*这是使用远程对象,返回内容与下面本地对象的data一致var store=new Ext.data.JsonStore({ url:'jsoncallback.js', root:'rows', fields:['id','name','occupation'] }); store.load();*/ var store=new Ext.data.JsonStore({ 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 Ext.grid.GridPanel({ 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', renderTo: 'Div_GridPanel' });

Ext.data.SimpleStore从数组对象更方便的创建Store对象,例var store=new Ext.data.SimpleStore({ data:[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ], autoLoad:true, fields:[{name: 'name', mapping: 1},{name:'occupation',mapping:2}] }) var grid = new Ext.grid.GridPanel({ 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' });

EXT核心API详解Ext.data(十三)-Tree/Node

Ext.data.Tree继承自Observable,用于存放树装的数据结构方法Tree( [Node root] )以root为根构造Ext.data.Tree对象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 )Ext.data.Node节点属性attributes : Object节点属性集childNodes : Array子节点firstChild : Node第一个子节点id : StringidlastChild : 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,但只针对子节点应用fnfindChild( String attribute, Mixed value ) : Node在子节点中找到第一个有属性attribute值为value的节点findChildBy( Function fn, [Object scope] ) : Node在子节点中找到第一个应用fn返回真的节点getDepth() : Number得到当前节点深度,根节点深度为0getOwnerTree() : Tree得到当前节点的Tree对象getPath( [String attr] ) : String得到当前节点的路径,默认attr为idindexOf( Node node ) : Numbernode在当前节点的子节点中的位置insertBefore( Node node, Node refNode ) : Node在参考节点refNode之前插入node节点isAncestor( Node node ) : Boolean当前节点是node的祖先节点?isFirst() : BooleanisLast() : 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排序子节点

EXT核心API详解Ext.widgets(十四)-Button,SplitButton,CycleButton

Ext.Actionaction实现一个脱离了容器的事件,所有它可以在多个容器之间共享,不过好象只有Ext.Toolbar, Ext.Button 和 Ext.menu.Menu支持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() : voidenable() : voidsetDisabled( Boolean disabled ) : void禁止/允许each( Function fn, Object scope ) : void为每个实现了此action的componet应用fnhide() : voidshow() : voidsetHidden( Boolean hidden ) : void显示/隐藏setHandler( Function fn, Object scope ) : voidsetIconClass( String cls ) : voidsetText( String text ) : void重新设置config配置的属性值示例:

function onItemCheck(item){Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));}function showMenu(obj){Ext.MessageBox.alert("点击下拉",obj.getXTypes() )}

Ext.QuickTips.init();var button=new Ext.SplitButton({ renderTo:Ext.getBody(), arrowHandler : showMenu, handler: onItemCheck, arrowTooltip : "更多", text:'按我', menu:'mainMenu'});

Ext.Button简单的按钮类公有属性:disabled : Boolean允许?hidden : Boolean隐藏?pressed : Boolean按下?方法 [继承来的忽略]Button( Object config )构造可选config{clickEvent : String, //handler响应的事件,默认是clickcls : String, //样式disabled : Boolean, //禁止enableToggle : Boolean,//允许在按下没按下之间切换,添加移除x-btn-pressed样式类handleMouseEvents : Boolean,//允许使用移入移出按下事件,默认是真handler : Function, //响应clickEvent定义的事件hidden : Boolean, //隐藏icon : String, //图标文件地址,如果修改x-btn-text-icon样式类可以重定义默认iconiconCls : String, //和icon功能类似,但使用设定了background-image属性的样式定义menu : Mixed //如果需要,可以为按钮定义菜单menuAlign : String, //菜单对齐方式,默认值是tl-blminWidth : Number, //最小宽度pressed : Boolean, //是否按下repeat : Boolean/Object,//是否需要重复定义鼠标按下事件,也可以是一个Ext.util.ClickRepeater配置对象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//切换按下状态示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title> <link rel="stylesheet" rev="stylesheet" href="/css/ext-all.css" type="text/css" media="all" /> <script. type="text/javascript" src="/scripts/adapter/ext/ext-base.js"></script> <script. type="text/javascript" src="/scripts/ext-all.js"></script> <style. type="text/css"> /*--加入样式背景好直观一点*/ .x-btn-pressed button{ background-color:red; } </style> <script. type="text/javascript"> Ext.onReady(function(){ //有菜单的按钮 function onItemCheck(item){ Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text)); }var menu = new Ext.menu.Menu({ id: 'mainMenu', items: [ { text: 'menu1', handler: onItemCheck }, { text: 'menu2', handler: onItemCheck }]});

var button=new Ext.Button({ renderTo:Ext.getBody(), text:'按我', menu:'mainMenu'});

//有状态的探钮new Ext.Button({ renderTo:Ext.getBody(), text:'toggle button ', enableToggle:true});

//分组的有状态按钮new Ext.Button({ renderTo:Ext.getBody(), text:'toggle button 1', enableToggle:true, toggleGroup:'toggleGroup', handler: onItemCheck});

new Ext.Button({ renderTo:Ext.getBody(), text:'toggle button 2', enableToggle:true, toggleGroup:'toggleGroup', handler: onItemCheck});

}); </script></head><body>

</body></html>

Ext.SplitButton上例中的带菜单按钮还不专业,于是有了Ext.SplitButton,专门为带有下拉菜单的按钮设计的方法:SplitButton( Object config )构造,config中加入了{arrowHandler : Function,arrowTooltip : String}setArrowHandler( Function handler, [Object scope] ) : void设置下拉箭头的点击事件事件:arrowclick : ( MenuButton this, EventObject e )使用示例:比如上例中的菜单按钮可以改为

function onItemCheck(item){Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text));}function showMenu(obj){Ext.MessageBox.alert("点击下拉",obj.getXTypes() )}

Ext.QuickTips.init();var button=new Ext.SplitButton({ renderTo:Ext.getBody(), arrowHandler : showMenu, handler: onItemCheck, arrowTooltip : "更多", text:'按我', menu:'mainMenu'});

Ext.CycleButton这是一个SplitButton的实用子类,用于在多个item之间切换状态,当然它也会带有menu可供选择,也可以直接点击按键在item之间切换方法:CycleButton( Object config )构造,config新增配置项{changeHandler : Function, //状态切换时的处理事件items : Array, //items应该是menu item的数组prependText : String, //前导textshowText : Boolean, //追加item的text到按钮显示}getActiveItem() : Ext.menu.CheckItemsetActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent ) : void得到/设置活动选项toggleSelected() : void切换选择项,相当于点击一次按钮示例

new Ext.CycleButton({ renderTo:Ext.getBody(), 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){ Ext.MessageBox.alert('Change View', item.text); }});

EXT核心API详解Ext.widgets(十五)-form(上)

Ext.form.BasicForm对应一个dom中的form,默认是用ajax提交的,如果的确想回传,可以使用如下方式var myForm. = new Ext.form.BasicForm("form-el-id", { onSubmit: Ext.emptyFn, submit: function() { this.getEl().dom.submit(); } });方法:BasicForm( Mixed el, Object config )其中config配置为{baseParams : Object, //请求时的附加参数,格式为{id: '123', foo: 'bar'}errorReader : DataReader, //提交时发生验证错误,这个dataReader将会被使用fileUpload : Boolean, //支持文件上传method : String, //GET或者POSTreader : DataReader, //load时使用的数据读取器timeout : Number, //超时时间trackResetOnLoad : Boolean,//支持使用reset方法恢复原始值url : String //form要提交的url地址}add( Field field1, [Field field2], [Field etc] ) : BasicForm增加字段field1,field2,etcapplyIfToFields( Object values ) : BasicFormapplyToFields( Object values ) : BasicForm用传入的values呼叫Ext.applyIf/apply 方法clearInvalid() : BasicForm清除当前basicform中所有的非法信息doAction( String/Object actionName, [Object options] ) : BasicForm执行预定义的动作actionName,actionName类似"submit","load",也可以是自定义的动作的名字或一个Ext.form.Action的实例,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() : Ext.Element得到当前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对象取值到当前basicformmarkInvalid( Array/Object errors ) : BasicForm标志非法,[{id:'fieldId', msg:'The message'},...]这样格式的数组或者{id: msg, id2: msg2}格式的对象remove( Field field ) : BasicForm从basicform中移除fieldrender() : BasicForm在basicForm的fields中寻找,利用id属性检查他们,然后用id属性呼叫applyTo方法reset() : BasicForm重置所有值setValues( Array/Object values ) : BasicForm设置值,参见getValuessubmit( Object options ) : BasicForm提交表单updateRecord( Record record ) : BasicForm利用当前更新record对象,参见loadRecord事件:actioncomplete : ( Form. this, Action action )actionfailed : ( Form. this, Action action )beforeaction : ( Form. this, Action action )Ext.form.Field有了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 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}构造很麻烦的,但还好我们一般不会直接使用fieldclearInvalid() : void清除非法信息getName() : StringgetRawValue() : MixedgetValue() : MixedisDirty() : voidisValid( Boolean preventMark ) : BooleanmarkInvalid( String msg ) : voidreset() : voidsetRawValue( Mixed value ) : voidsetValue( Mixed value ) : voidvalidate() : Boolean都很简单也略过了事件blur : ( Ext.form.Field this )change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )focus : ( Ext.form.Field this )invalid : ( Ext.form.Field this, String msg )specialkey : ( Ext.form.Field this, Ext.EventObject e )valid : ( Ext.form.Field this )Ext.form.Checkbox继承自Field, 复选框Checkbox( Object config )构造,其中config{ autoCreate : String/Object, boxLabel : String, checked : Boolean, fieldClass : String,//x-form-field focusClass : String,}getValue() : BooleaninitComponent() : voidsetValue( Boolean/String checked ) : void事件check : ( Ext.form.Checkbox this, Boolean checked )Ext.form.Radio继承自Ext.form.Checkbox,单选框多了一个方法getGroupValue() : String如果单选框是一组radio 的一部分,取当前选中的值Ext.form.Hidden继承自Field,隐藏字段,无新特性Ext.form.HtmlEditor继承自Field,这个htmleditor功能太简单了,什么人能扩充一下就好了config定义{createLinkText : String //defaultLinkValue : String // http://enableAlignments : BooleanenableColors : BooleanenableFont : BooleanenableFontSize : BooleanenableFormat : BooleanenableLinks : BooleanenableLists : BooleanenableSourceEdit : BooleanfontFamilies : Array //这个当然要用汉字的字体组成的数组了}方法cleanHtml( String html ) : voidcreateToolbar( HtmlEditor editor ) : voidexecCmd( String cmd, [String/Boolean value] ) : voidgetDocMarkup() : voidgetToolbar() : Ext.ToolbarinsertAtCursor( String text ) : voidpushValue() : voidrelayCmd( String cmd, [String/Boolean value] ) : voidsyncValue() : voidtoggleSourceEdit( [Boolean sourceEdit] ) : voidupdateToolbar() : void要提一点的是,要使用HtmlEditor,别忘了先Ext.QuickTips.init();Ext.form.TextFieldconfig{ 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 //Ext.form.VTypes 中定义的vtype类型名,支持简单的类型验证 vtypeText : String//如果不是,则提示}方法:TextField( Object config )构造autoSize() : void自动尺寸reset() : void重置selectText( [Number start], [Number end] ) : void选择文本validateValue( Mixed value ) : Boolean验证值

EXT核心API详解Ext.widgets(十六)-form(下)

Ext.form.NumberField继承自Ext.form.TextField,因为Ext.form.TextField虽然强大,但写起来的确还是有点麻烦,后面的类都继承自Ext.form.TextField,没有自定义的方法,属性和事件config定义为{ allowDecimals : Boolean //true allowNegative : Boolean //true baseChars : String //'0123456789' decimalPrecision : Number //精度,默认值2 decimalSeparator : String //小数分隔符 fieldClass : String //默认样式为x-form-field x-form-num-field maxText : String maxValue : Number //默认Number.MAX_VALUE minText : String minValue : Number //默认Number.NEGATIVE_INFINITY nanText : String //NaN时显示?}Ext.form.TextAreaconfig{ autoCreate : String/Object //{tag: "textarea", style. "width:100px;height:60px;", autocomplete: "off"} growMax : Number //1000 growMin : Number //60 preventScrollbars : Boolean //如果为真等于设置overflow: hidden,默认为false}Ext.form.TriggerField这个类只要text旁边加了个下拉按钮,要自己实现onTriggerClickconfig{ autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"} hideTrigger : Boolean //隐藏trigger,就是右边的那个下拉选择框 triggerClass : String}事件onTriggerClick( EventObject e ) : voidExt.form.DateField继承自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() : DatesetValue( String/Date date ) : voidExt.form.ComboBoxconfig{ 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 //对齐方式,参见Ext.Element.alignTo,默认为'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 : Ext.data.Store title : String transform. Mixed //对应一个select元素,可以将select转为combobox对象 triggerAction : String //点击按钮时的动作.默认为query triggerClass : String typeAhead : Boolean //false typeAheadDelay : Number //250 valueField : String valueNotFoundText : String //值不存在时的提示信息}属性view : Ext.DataView方法ComboBox( Object config )构造clearValue() : void清除所有文本/值对collapse() : voidexpand() : 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属性为valuesetValue( String value ) : void设置当前值为事件beforequery : ( Object queryEvent )beforeselect : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )collapse : ( Ext.form.ComboBox combo )expand : ( Ext.form.ComboBox combo )select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )Ext.form.TimeField继承自combobox,用于选择时间config{ altFormats : String // format : String increment : Number //时间增长间隔,默认15 invalidText : String maxText : String maxValue : Date/String minText : String minValue : Date/String}总的来说Ext.form对input type='text' select 这样的输入标签都有对应的类,并对有些标签做了简单的扩展,当然很重要的一点,漂亮多了,vtype属性也方便了处理,建议有兴趣的同胞对 Ext.form.VTypes和Ext.form.HtmlEditor做一些扩展form中还有两个类,比如下例中的FormPanel和FieldSet,都继承自panel,所以会放在panel中解释综合示例

Ext.QuickTips.init(); var arr=[ [1, '本.拉登'], [2, '笨.拉登'],[3, '笨.拉灯'] ]; var reader = new Ext.data.ArrayReader( {id: 0}, [ {name: 'value'}, {name: 'key'} ]); var store=new Ext.data.Store({ reader:reader }); store.loadData(arr); var htmleditor=new Ext.form.HtmlEditor({ fieldLabel:'htmleditor', width:450, fontFamilies:['宋体','隶书'], name:'editor', id:'editor' }); var form. = new Ext.FormPanel({ labelWidth: 75, url:'post.php', frame.:true, width: 800, defaultType: 'textfield', items: [ new Ext.form.Checkbox({ //checkbox fieldLabel:'checkbox', name:'cb', checked:true, boxLabel:'checkbox' }), new Ext.form.FieldSet({ //radio border:false, title:'radio', items:[ new Ext.form.Radio({ labelSeparator:'', name:'radio', checked:true, boxLabel:'radio 1' }), new Ext.form.Radio({ labelSeparator:'', name:'radio', checked:true, boxLabel:'radio 2' }) ] }), new Ext.form.Hidden({ //hidden name:'hidden' }), htmleditor, new Ext.form.TextField({ //text fieldLabel:'text', name:'text', grow:true, allowBlank:false, blankText : "这个字段最好不要为空", maskRe:/[a-zA-z]/gi }), new Ext.form.NumberField({ //NumberField allowNegative:true, fieldLabel:'number', name:'number' }), new Ext.form.TextArea({ //TextArea fieldLabel:'textarea', name:'textarea' }), new Ext.form.TriggerField({ //TriggerField fieldLabel:'TriggerField', name:'TriggerField' }), new Ext.form.ComboBox({ //select fieldLabel:'select', editable:false, triggerAction: 'all', valueField:'value', displayField:'key', mode: 'local', store:store }), new Ext.form.ComboBox({ //combobox fieldLabel:'ComboBox', displayField:'key', mode: 'local', store:store }), new Ext.form.DateField({ //DateField fieldLabel:'DateField', format:'Y-m-d', disabledDays:[0,6] }), new Ext.form.TimeField({//TimeField fieldLabel:'TimeField', mode: 'local', increment:60 }) ] });form.render(document.body);

htmleditor.setRawValue("<h1>hello world</h1>");htmleditor.syncValue();

EXT核心API详解Ext.menu.Menu(十七)

Ext.menu.Menu菜单对象config{ allowOtherMenus : Boolean //允许同时显示其它的菜单? defaultAlign : String //默认对齐方式:tl-bl? defaults : Object //默认的菜单项配置,将会应用到所有的items items : Mixed //菜单项数组 minWidth : Number //最小宽度.默认120 shadow : Boolean/String // subMenuAlign : String //子菜单对齐方式 tl-tr?}Menu( Object config )构造add( Mixed args ) : Ext.menu.Item添加菜单项可能的参数为 * 从Ext.menu.Item继承来的菜单项对象* 可以被转换为menu item的HTMLElement对象* 一个Ext.menu.Item的构造config对象*一个字符串,-或separator将为分隔项,其它的做为TextItem对象的构造参数addElement( Mixed el ) : Ext.menu.Item添加Element对象addItem( Ext.menu.Item item ) : Ext.menu.Item添加Item 对象addMenuItem( Object config ) : Ext.menu.Item添加Item对象,这回传入的参数是item构造的config参数addSeparator() : Ext.menu.Item添加间隔项addText( String text ) : Ext.menu.Item添加文本项getEl() : Ext.Element得到当前element对象hide( [Boolean deep] ) : void隐藏insert( Number index, Ext.menu.Item item ) : Ext.menu.Item在index位置插入itemisVisible() : void可见?remove( Ext.menu.Item item ) : void移除itemremoveAll() : void移除所有show( Mixed element, [String position], [Ext.menu.Menu parentMenu] ) : void相对于element显示当前菜单showAt( Array xyPosition, [Ext.menu.Menu parentMenu] ) : void在绝对位置xyposition显示当前菜单Ext.menu.BaseItem所有菜单项的基类,继承自Componentconfig { activeClass : String //活跃时的样式类,默认x-menu-item-active canActivate : Boolean //能设置活跃?默认为false handler : Function //事件处理句柄 hideDelay : Number //隔多长时间自动隐藏,默认100(毫秒) hideOnClick : Boolean //点击后自动隐藏,默认为真}BaseItem( Object config )构造setHandler( Function handler, Object scope ) : void设置处理句柄handler事件:activate : ( Ext.menu.BaseItem this )click : ( Ext.menu.BaseItem this, Ext.EventObject e )deactivate : ( Ext.menu.BaseItem this )Ext.menu.Adapter这个类是为了支持将非BaseItem子类的容器转换为支持baseitem的适配器,除了构造,与BaseItem无异Adapter( Ext.Component component, Object config ),可以自己再继承它做点实用的事, 他的两个子类更好用Ext.menu.ColorMenu提供颜色选择Ext.menu.DateItem提供日期选择Ext.menu.Item是BaseItem的另一个实用子类,提供一般的菜单项,支持菜单项之间的相互关系config{ canActivate : Boolean href : String hrefTarget : String icon : String //默认Ext.BLANK_IMAGE_URL,建议更改,extjs.com的确太慢了 iconCls : String itemCls : String showDelay : Number text : String}方法Item( Object config )构造setIconClass( String cls ) : voidsetText( String text ) : voidExt.menu.CheckItem继承自Item,前面带有选择框的菜单项config{ checked : Boolean group : String groupClass : String //默认x-menu-group-item itemCls : String}方法CheckItem( Object config )构造checkHandler( Ext.menu.CheckItem this, Boolean checked ) : void选择处理方法setChecked( Boolean checked, [Boolean suppressEvent] ) : void设置选择状态事件beforecheckchange : ( Ext.menu.CheckItem this, Boolean checked )checkchange : ( Ext.menu.CheckItem this, Boolean checked )Ext.menu.Separator继承自item,间隔项Ext.menu.TextItem继承自item,文本项config{ hideOnClick : Boolean itemCls : String text : String}下面的示例从ext官方而来,继续简单的修改,只有menu相关部分.同样也都很简单

Ext.QuickTips.init();

//日期选择项点击事件 var dateMenu = new Ext.menu.DateMenu({ handler : function(dp, date){ Ext.MessageBox.alert('Date Selected', String.format('You chose {0}.', date.format('M j, Y'))); } });

var colorMenu = new Ext.menu.ColorMenu({ handler : function(cm,color){ Ext.MessageBox.alert('Color Selected', String.format('You chose #{0}.', cm.palette.value)); } });

var menu = new Ext.menu.Menu({ id: 'mainMenu', items: [ { text: 'I like Ext', checked: true, checkHandler: onItemCheck }, { text: 'Ext for jQuery', checked: true, checkHandler: onItemCheck }, { text: 'I donated!', checked:false, checkHandler: onItemCheck }, '-', { text: 'Radio Options', menu: { items: [ '<b class="menu-title">Choose a Theme</b>', { text: 'Aero Glass', checked: true, group: 'theme', checkHandler: onItemCheck }, { text: 'Vista Black', checked: false, group: 'theme', checkHandler: onItemCheck }, { text: 'Gray Theme', checked: false, group: 'theme', checkHandler: onItemCheck }, { text: 'Default Theme', checked: false, group: 'theme', checkHandler: onItemCheck } ] } },{ text: 'Choose a Date', iconCls: 'calendar', menu: dateMenu },{ text: 'Choose a Color', menu: colorMenu } ] });

var tb = new Ext.Toolbar(); tb.render(Ext.getBody());

tb.add({ text:'Button w/ Menu', iconCls: 'bmenu', // <-- icon menu: menu // assign menu by instance } );

menu.addSeparator(); // Menus have a rich api for // adding and removing elements dynamically var item = menu.add({ text: 'Dynamically added Item' }); // items support full Observable API item.on('click', onItemClick);

// items can easily be looked up menu.add({ text: 'Disabled Item', id: 'disableMe' // <-- Items can also have an id for easy lookup // disabled: true <-- allowed but for sake of example we use long way below }); // access items by id or index menu.items.get('disableMe').disable(); //这个增加子菜单的方法照猫画虎学的,至于add的到底是个什么?getXType得不到,item有私有的属性menu? var ele=menu.add({ text:'submit', menu:{ items:[ {text:'submenu1',handler:onItemClick}, {text:'submenu2',handler:onItemClick} ] } });

// functions to display feedback function onButtonClick(btn){ Ext.MessageBox.alert('Button Click',String.format('You clicked the "{0}" button.', btn.text)); }

function onItemClick(item){ Ext.MessageBox.alert('Menu Click', String.format('You clicked the "{0}" menu item.', item.text)); }

function onItemCheck(item, checked){ Ext.MessageBox.alert('Item Check', String.format('You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked')); }

function onItemToggle(item, pressed){ Ext.MessageBox.alert('Button Toggled', String.format('Button "{0}" was toggled to {1}.', item.text, pressed)); }

EXT核心API详解Ext.Toolbar(十八)

工具栏,使用起来很简单，add已准备好的元素就行方法Toolbar( Object/Array config )构造add( Mixed arg1, Mixed arg2, Mixed etc. ) : void增加元素可以是 1:Ext.Toolbar.Button 相当于addButton2:HtmlElement 相当于addElement3:Field 相当于addField4:Item 相当于addItem5:String 相当于addText6:'separator'或'-' 相当于addSeparator7:'' 相当于addSpacer8:'->' 相当于addFilladdButton( Object/Array config ) : Ext.Toolbar.Button/Array添加Ext.Toolbar.Button/SplitButton对象,其实因为Ext.Toolbar.Button和Ext.Button用起来没什么区别,而且Toolbar两者都支持，我实验时没发现使用上有什么不同addDom( Object config ) : Ext.Toolbar.Item添加DOM节点addElement( Mixed el ) : Ext.Toolbar.Item添加Element对象addField( Ext.form.Field field ) : Ext.ToolbarItem添加Ext.form.Field对象addFill() : Ext.Toolbar.Fill添加一个撑满工具条的空白元素addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item添回Ext.Toolbar.Item对象addSeparator() : Ext.Toolbar.Item添加一个分隔元素,相当于addItem(new Ext.Toolbar.Separator());addSpacer() : Ext.Toolbar.Spacer添加一个空白元素,相当于addItem(new Ext.Toolbar.Spacer());addText( String text ) : Ext.Toolbar.Item添加文本元素,相当于addItem(new Ext.Toolbar.TextItem(text));insertButton( Number index, Object/Ext.Toolbar.Item/Ext.Toolbar.Button button ) : Ext.Toolbar.Button/Item在第index个元素之前插入button对象Ext.Toolbar.Item工具栏元素基类Toolbar.Item( HTMLElement el )构造destroy() : void销毁disable() : voidenable() : void可用／禁用focus() : void得到焦点　getEl() : HTMLElement得到当前DOM对象setVisible( Boolean visible ) : voidshow() : voidhide() : void显示隐藏Ext.Toolbar.Separator继承自item,工具栏分隔符Ext.Toolbar.Spacer继承自item,工具栏空白元素Ext.Toolbar.TextItem继承自item,工具栏文本元素Ext.Toolbar.Fill继承自Spacer,工具栏空白元素,撑满工具栏简单的示例

EXT核心API详解Ext.widgets(十九)-grid(1)

Ext.grid.ColumnModel用于定义Grid的列用例var colModel = new Ext.grid.ColumnModel([ {header: "Ticker", width: 60, sortable: true}, {header: "Company Name", width: 150, sortable: true} ]);回到ColumnModel,它的构造参数是一个config组成的数组,其中config定义为{ align : String //css中的对齐方式 dataIndex : String //要绑定的Store之Record字段名 fixed : Boolean //如果为真列宽不能被改变 header : String //头部显示的名称 hidden : Boolean //隐藏本列 id : String //主要用于样式选择,如果已定义此属性,那么列所在的单元格会定义class为 x-grid-td-id renderer : Function //可以使用这个构造参数格式化数据 resizable : Boolean //可调节尺寸 sortable : Boolean // 可排序 width : Number //宽度}另外虽然未经声明,但config事实上支持editor:Ext.form.Field属性,这点会在Ext.grid.EditorGridPanel 中看到,另外为了扩展grid的表现,我们通常也需要自定义列,顺便提一个有趣的列,Ext.grid.RowNumberer,这是Ext为我们扩展好的一个简单列,它的构造很简单,也没有其它的方法和属性,Ext.grid.RowNumberer({ header : String, sortable : Boolean, width : Number})如果使用它,上例可改为var colModel = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {header: "Ticker", width: 60, sortable: true}, {header: "Company Name", width: 150, sortable: true} ]);属性defaultSortable : Boolean //默认可排序defaultWidth : Number //默认的宽度setConfig : Object //返回构造时的config参数方法ColumnModel( Object config )构造getCellEditor( Number colIndex, Number rowIndex ) : Object得到指定行列的编辑者getColumnById( String id ) : Object得到指定id的列对象getColumnCount() : Number得到列数getColumnHeader( Number col ) : String得到列头部文本getColumnId( Number index ) : String得到列idgetColumnTooltip( Number col ) : String得到列提示getColumnWidth( Number col ) : Number列宽getColumnsBy( Function fn, [Object scope] ) : Array通过fn找到指定的列getDataIndex( Number col ) : Number得到指定列的数据绑定对象在store中的序号getIndexById( String id ) : Number通过id找序号getRenderer( Number col ) : Function得到绘制器getTotalWidth( Boolean includeHidden ) : Number总的宽度hasListener( String eventName ) : Boolean有事件侦听者?isCellEditable( Number colIndex, Number rowIndex ) : Boolean指定行列可编辑?isFixed() : void应该返回Boolean,充满?isHidden( Number colIndex ) : Boolean指定列隐藏?isResizable() : Boolean可重写义大小isSortable( Number col ) : Boolean可排序?setColumnHeader( Number col, String header ) : void设置指定列列头setColumnTooltip( Number col, String tooltip ) : void设置指定列提示setColumnWidth( Number col, Number width ) : void设置指定列宽度setConfig( Array config ) : void重设configsetDataIndex( Number col, Number dataIndex ) : void设置指定列的数据源setEditable( Number col, Boolean editable ) : void设置指定列是否可编辑setEditor( Number col, Object editor ) : void为指定列设置编辑器setHidden( Number colIndex, Boolean hidden ) : void设置指定列隐藏setRenderer( Number col, Function fn ) : void为指定列设置输出方法事件columnmoved : ( ColumnModel this, Number oldIndex, Number newIndex )configchanged : ( ColumnModel this )headerchange : ( ColumnModel this, Number columnIndex, String newText )hiddenchange : ( ColumnModel this, Number columnIndex, Boolean hidden )widthchange : ( ColumnModel this, Number columnIndex, Number newWidth )Ext.grid.PropertyColumnModel继承自Ext.grid.ColumnModel,专为Ext.grid.PropertyGrid而设计,构造有点不同,不过这个api文档不知道谁写的,ext2中好象没有grid了,PropertyColumnModel( Ext.grid.Grid grid, Object source )Ext.grid.GridView为GridPanel提供视图支持config{ autoFill : Boolean enableRowBody : Boolean forceFit : Boolean}属性columnsText : String //列文本scrollOffset : Number //滚动步行sortAscText : String //正序文本sortClasses : Array //正序和倒序时头部列使用的样式,默认为["sort-asc", "sort-desc"]sortDescText : String //倒序文本方法GridView( Object config )构造focusCell( Number row, Number col ) : void指定第row行第col列得到焦点focusRow( Number row ) : void选中第row行getCell( Number row, Number col ) : HtmlElement得到指定行列的htmlelement对象getHeaderCell( Number index ) : HtmlElement得到指定列的表单头对象getRow( Number index ) : HtmlElement得到指定行的htmlelement对象getRowClass( Record record, Number index, Object rowParams, Store ds ) : void//得到指定行的样式?郁闷的是没有能在GridView.js中找到此方法的定义refresh( [Boolean headersToo] ) : void涮新显示scrollToTop() : void滚动到头部Ext.grid.GroupingView继承自Ext.grid.GridView,用于数据分组 ,应用于config{emptyGroupText : String //空的分组显示文本enableGroupingMenu : Boolean //允许分组菜单enableNoGroups : Boolean //允许分组/不分组显示groupTextTpl : String //这是个模板,分组项的内容依此显示,语法参见模板,hideGroupedColumn : Boolean //隐藏分组列startCollapsed : Boolean //开始时收起,默认为假}另外虽然没有在api中说明,但groupByText和showGroupsText属性也是可以在config中指定的方法GroupingView( Object config )构造getGroupId( String value ) : void取得指定值的分组id,为toggleGroup而准备的方法toggleAllGroups( [Boolean expanded] ) : void收起或展开所有的分组toggleGroup( String groupId, [Boolean expanded] ) : void展开或收起指定的分组,例grid.view.toggleGroup(grid.view.getGroupId('Horticulturalist'));会展开或收起分组字段值为'Horticulturalist'的分组

Ext.onReady(function()...{ //定义数组 var arr=[ ['Bill', 'Gardener'], [ 'Ben', 'Horticulturalist'],['你', 'Gardener'],['他', 'Gardener'],[ '我', 'Horticulturalist'] ]; var reader = new Ext.data.ArrayReader( ...{}, //定义数组到record的映射关系 [ ...{name: 'name'}, ...{name: 'occupation', mapping: 1} ] ); //生成元数据 var store=new Ext.data.Store(...{ reader:reader }); store.loadData(arr); //现在配置列信息 var col=new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(...{header:'序号',width:30}), ...{header:'姓名',sortable: true,dataIndex:'name'}, ...{header:'职业',sortable: true,dataIndex:'occupation'} ]); //配置视图信息 var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'}); view.columnsText='列显示/隐藏'; //现在我们有一个可用的grid了,别骄傲这只是第一步 var grid=new Ext.grid.GridPanel(...{ el:Ext.getBody(), height:200, width:400, store:store, cm:col, view:view }); grid.render(); //现在我们需要一个GroupingStore var gstore=new Ext.data.GroupingStore(...{ reader:reader, groupField:'name', groupOnSort:true, sortInfo:...{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定sortInfo信息 }); gstore.loadData(arr); //扩展一下我们的grid,让他能分组当然会更酷一点 var ggrid = new Ext.grid.GridPanel(...{ ds: gstore, cm:col, view: new Ext.grid.GroupingView(...{ forceFit:true, sortAscText :'正序', sortDescText :'倒序', columnsText:'列显示/隐藏', groupByText:'依本列分组', showGroupsText:'分组显示', groupTextTpl: '{text} ({[values.rs.length]} 条记录)' }), frame:true, width: 400, height: 300, collapsible: true, animCollapse: false, renderTo:Ext.getBody() });

EXT核心API详解Ext.widgets(二十)-grid(2)

Ext.grid.EditorGridPanel可编辑数据表格Config {clicksToEdit : Number //点几次开始编辑,默认为2}方法EditorGridPanel()构造,应为 EditorGridPanel(Object config)startEditing( Number rowIndex, Number colIndex ) : voidstopEditing() : void开始停止编辑事件afteredit : ( Object e )beforeedit : ( Object e )validateedit : ( Object e )下面我们扩展一下刚才的示例应用一下EditorGridPanel//定义数组var arr=[ ['Bill', 'Gardener','2007-01-02',-10,true], [ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false], ['你', 'Gardener','2007-02-02',0,true], ['他', 'Gardener','2007-01-04',13,false], [ '我', 'Horticulturalist','2007-01-05',15.2,false] ];var reader = new Ext.data.ArrayReader( ...{},//定义数组到record的映射关系 [ ...{name: 'name'}, ...{name: 'occupation', mapping: 1}, ...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式转换日期 ...{name:'float',type:'float'}, ...{name:'bool',type:'bool'} ]);//生成元数据var store=new Ext.data.Store(...{ reader:reader });store.loadData(arr);//自定义可编辑列,从ext的示例抄的,但是却要init郁闷Ext.grid.CheckColumn = function(config)...{ Ext.apply(this, config); if(!this.id)...{ this.id = Ext.id(); } this.renderer = this.renderer.createDelegate(this);};//重写了三个方法,捕捉mousedown修改数据Ext.grid.CheckColumn.prototype =...{init : function(grid)...{ this.grid = grid; this.grid.on('render', function()...{ var view = this.grid.getView(); view.mainBody.on('mousedown', this.onMouseDown, this); }, this);},onMouseDown : function(e, t)...{ if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{ e.stopEvent(); var index = this.grid.getView().findRowIndex(t); var record = this.grid.store.getAt(index); record.set(this.dataIndex, !record.data[this.dataIndex]); }},renderer : function(v, p, record)...{ p.css += ' x-grid3-check-col-td'; return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';}}//绑定到bool字段var checkColumn=new Ext.grid.CheckColumn(...{ header: "布尔值", dataIndex: 'bool'});/**//* 现在配置列信息,为了本地化日期选择器,请包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"]; 在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"确定",cancelText:"取消";*/var col=new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(...{header:'序号',width:30}), ...{header:'姓名',sortable: true,dataIndex:'name'}, ...{header:'职业',sortable: true,dataIndex:'occupation'}, ...{ id:'datacol', header:'日期', sortable:true, dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化显示 editor:new Ext.form.DateField() }, ...{header:'数值',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()}, //自定义显示方式,右对齐 checkColumn //这个"选择框列"看起来的确漂亮些,其实是通过修改背景图片实现的]);//配置视图信息var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});view.columnsText='列显示/隐藏';//现在我们看看可编辑的数据表格能用了吗 var grid=new Ext.grid.EditorGridPanel(...{ el:Ext.getBody(), height:200, width:400, store:store, cm:col, view:view }); //为什么原例不需要init?checkColumn.init(grid);grid.render();function formatFloat(val)...{ var bgcolor; if(val>0)...{ bgcolor='#FF0000'; }else if(val<0)...{ bgcolor='#00FF00'; } else...{ bgcolor='#000000'; } return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));}Ext.grid.PropertyGrid属性表格.继承自EditorGridPanel,用习惯ide的用户都会喜欢这个简单的属性表格,config{ customEditors : Object //自定义属性编辑器 source : Object //数据源}方法PropertyGrid( Object config )构造getSource() : ObjectsetSource( Object source ) : void得到和设置数据源事件beforepropertychange : ( Object source, String recordId, Mixed value,propertychange : ( Object source, String recordId, Mixed value, Mixed同样用一个简单的示例来完成PropertyGrid的学习var grid=new Ext.grid.PropertyGrid(...{ el:Ext.getBody() ,height:200 ,width:400 ,viewConfig : ...{forceFit:true} ,customEditors:...{ '年龄':new Ext.grid.GridEditor(new Ext.form.NumberField()) } ,source:...{ '姓名':'blackant' ,'年龄':100 }});grid.source['性别']='男';grid.customEditors['性别']=new Ext.grid.GridEditor(new Ext.form.ComboBox(...{ editable:false ,triggerAction: 'all' ,store: new Ext.data.SimpleStore(...{ fields: ['gender'], data : [['男'],['女']] }) ,displayField:'gender' ,forceSelection:true ,mode:'local'}));grid.render();选择模式都很容易使用,略过,至于其它的扩展,有时间再慢慢研究了,第一步先以学会使用为主

最新回复(0)