EXT核心API详解

whjtiger

贡献于2010-12-02

字数:277799 关键词: API ExtJS JavaScript框架 CSS Basic

EXT核心API详解 (一) - Ext Ext类 addBehaviors( Object obj ) : void 对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如 addBehaviors({ // id=foo下所有的a标签加入click事件 '#foo a@click' : function(e, t){ // do something }, // 用,分隔多个选择器 '#foo a, #bar span.some-class@mouseover' : function(){ // do something } }); apply( Object obj, Object config, Object defaults ) : Object 从config拷贝所有的属性到obj,如果有defaults参数,也将拷贝其属性到obj applyIf( Object obj, Object config ) : Object 从config拷贝所有属性至obj(如果obj未定义相应属性) decode(Object obj) : String 编码一个对象/数组或其它值为一个json格式字符串(支持对象,数组,日期,字符串)。Ext.decode() 和Ext.encode()分别是是 Ext.util.JSON.decode()和Ext.util.JSON.encode的简写 destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void 尝试去移除每个传入的对象,包括DOM,事件侦听者,并呼叫他们的destroy方法(如果存在) each( Array/NodeList/Mixed array, Function fn, Object scope ) : void 利用array中的每个元素迭代调用fn.直到fn返回假,调用格式fn.call(scope || array[i], array[i], i, array); encode(String json) : Object 将一个json格式字符串反序列化为对象 escapeRe( String str ) : String 为字符串正则编码将.在*+?^${}()|[]/\字符前加\ extend( Object subclass, Object superclass, [Object overrides] ) : void 从superclass类继承subclass,overrides参数是要重载的方法列表,详见override fly( String/HTMLElement el, [String named] ) : Element 得到全局共享的一个浮动元素el,如果有多个浮动元素可以使用命名以避免潜在的冲突 get( Mixed el ) : Element 得到一个Element对象,参数可以是id或DOM节点或已存在的Element对象 getBody() : Element 得到当前文档的body对象 getCmp( String id ) : Component 通过id得到一个Component对象 getDoc() : Element 得到当前文档 EXT核心API详解 2010年5月21日 10:02 分区 2010-05 的第 2 页 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节点是父节点中第一个子节点 分区 2010-05 的第 3 页 E:last-child E节点是父节点中最后一个子节点 E:nth-child(n) E是父节点中每n个节点 E:nth-child(odd) E是父节点中的奇数节点 E:nth-child(even) E是父节点中的偶数节点 E:only-child E是父节点中惟一的子节点 E:checked checked属性为真的节点 E:first 子孙节点中的第一个E节点 E:last 子孙节点中的最后一个E节点 E:nth(n) 子孙节点中的第n个E节点 E:odd E:nth-child(odd)的简写 E:even E:nth-child(even)的简写 E:contains(foo) innerHTML属性中含有foo的E节点 E:nodeValue(foo) E节点中包含一个值为foo的文本节点 E:not(S) 不匹配简单选择器S的E节点 E:has(S) 有能匹配简单选择器S的子节点的E节点 E:next(S) 下一个兄弟节匹配简单选择器S的E节点 E:prev(S) 前一个兄弟节匹配简单选择器S的E节点 type( Mixed object ) : String 判断对象类型,如果不是下列值之一将返回false [样式选择器] 例: E{display=none} display属性值为none的E节点 E{display^=none} display属性值以none开始的E节点 E{display$=none} display属性值以none结束的E节点 E{display*=none} display属性值含有none子字串的E节点 E{display%=2} display属性值能被2整除的E节点 E{display!=none} display属性值不等于none的E节点 select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) :CompositeElementLite/CompositeElement 在root内通过样式选择器或元素数组selector选择元素或元素列表,unique指示是否只选择惟一值 urlDecode( String string, [Boolean overwrite] ) : Object 将url格式字符串string解码为json对象,overwrite参数指示是否不重写已存在的对象,例: Ext.urlDecode("foo=1&bar=2"); //返回 {foo: 1, bar: 2} Ext.urlDecode("foo=1&bar=2&bar=3&bar=4"); //返回 {foo: 1, bar: 4}. Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true); //返 回 {foo: 1, bar: [2, 3, 4]}. urlEncode( Object o ) : String 将json对象编码为url格式字符串,参见urlDecode type( Mixed object ) : String 得到object类型,如果不为以下列举值之一则返回false string/number/boolean/function/object/array/regexp/element/nodelist/textnode /whitespace EXT核心API详解(二) - Array/Date/Function/Number/String Array类 object是否在数组中,找不到返回-1;找到返回位置 分区 2010-05 的第 4 页 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('
{1}
', cls, text);// 结 果
Some text
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 格式化时间: 分区 2010-05 的第 5 页 d 两位数的日期 01 至 31 D 三字母的星期名 Mon 至 Sun j 一位数的日期 1 至 31 l 完整的星期名 Sunday 至 Saturday S 日期的英文顺序刻词尾,两个字符 st, nd, rd or th. w 一周中的第几天 0 (星期天) 至 6 (星期六) z 一年中的第几天 0 至 364 (闰年365 ) W ISO-8601 星期数, 周一算一个星期的开始 1 至 53 F 月的完整英文名 January 至 December m 月,以0前导 01 至 12 M 三字母的简写月名 Jan 至 Dec n 月 1 至 12 t 本月有多少天 28 至 31 L 是否闰年 1/0 Y 完整的年份 例: 1999 或 2003 y 年的后两位 例: 99 或 03 a 上午/下午小写 am 或 pm A 上午/下午大写 AM 或 PM g 小时/12小时制 1 至 12 G 小时/24小时制 0 至 23 h 小时/12小时制 01 至 12 H 小时/24小时制 00 至 23 i 分钟 00 至 59 s 秒 00 至 59 u 毫秒 001 至 999 O 时区,与格林威治标准时间之差 例: +0200 T 时区简写 例: EST, MDT ... Z 时区间距 -43200 至 50400 其中Date类内置了几种格式: Date.patterns = { ISO8601Long:"Y-m-d H:i:s", ISO8601Short:"Y-m-d", ShortDate: "n/j/Y", LongDate: "l, F d, Y", FullDateTime: "l, F d, Y g:i:s A", MonthDay: "F d", ShortTime: "g:i A", LongTime: "g:i:s A", SortableDateTime: "Y-m-d\\TH:i:s", UniversalSortableDateTime: "Y-m-d H:i:sO", YearMonth: "F, Y" }; 当然ISO8601Long和ISO8601Short还是非常招人喜欢的 例: dt.format(Date.patterns.ISO8601Long); 分区 2010-05 的第 6 页 dt.format('Y-m-d H:i:s'); getDayOfYear() : Number 一年中的第几天,从0开始 getDaysInMonth() : Number 本月有多少天, getElapsed( [Date date] ) : Number 当前日期对象与date之间相差的毫秒数 getFirstDateOfMonth() : Date 本月的第一天 getFirstDayOfMonth() : Number 本月第一天是星期几 getGMTOffset() : String 时区信息(见格式定义中的'O') getFirstDateOfMonth() : Date 本月最后一天 getFirstDayOfMonth() : Number 本月最后一天是星期几 getSuffix() : String 日期后导符(见格式定义中的S) getTimezone() : String 时区(见T) getWeekOfYear() : Number 一年中的第几周(见W) isLeapYear() : Boolean 是否闰年 Function类 createCallback(/*args...*/) : Function 创建回叫方法 createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] ) : 创建委托 这两个记法除了传参方式不同,看不出有什么差异都是调用method.apply,createCallback可以看 作一个简化版的createDelegate createCallback==>return method.apply(window, args); createDelegate==>return method.apply(obj || window, callArgs); 前者参数比较简单,直接传过去了,后者的规则比较复杂点,如果appendArgs为真,args将附加在参数 列表之后,如果是数值,args将在参数列表的appendargs位置插入,其它情况下原参将不起作用 例: var fn = func1.createDelegate(scope, [arg1,arg2], true) //fn(a,b,c) === scope.func1(a,b,c,arg1,arg2); var fn = func1.createDelegate(scope, [arg1,arg2]) //fn(a,b,c) === scope.func1(arg1,arg2); var fn = func1.createDelegate(scope, [arg1,arg2], 1) 分区 2010-05 的第 7 页 //fn(a,b,c) === scope.func1(a,arg1,arg2,b,c); var fn = func1.createCallback(arg1, arg2); //fn() === func1(arg1, arg2) createCallback : function(/*args...*/) createInterceptor( Function fcn, [Object scope] ) : Function 创建阻断方法,如果fcn返回false,原方法将不会被执行 createSequence( Function fcn, [Object scope] ) : Function 创建组合方法,执行原方法+fcn defer( Number millis, [Object obj], [Array args], [Boolean/Number appendArgs] ):Number 定时执行,隔millis毫秒后执行原方法 EXT核心API详解(三) - Ext.Element Ext.Element类 Element( String/HTMLElement element, [Boolean forceNew] ) 由id或DOM节点创建Element对象 Element.fly( String/HTMLElement el, [String named] ) : Element 由id或DOM节点创建一个全局共享的活动元素,可由named命名以避免可能的冲突 Element.get( Mixed el ) : Element 由id或DOM节点或已存在的Element得到一个Ext.Element对象 addClass( String/Array className ) : Ext.Element 为元素添加一个或多个css类名 addClassOnClick( String className ) : Ext.Element 为点击事件添加和移除css类 addClassOnFocus( String className ) : Ext.Element 为得到和失去焦点添加和移除css类 addClassOnOver( String className, [Boolean preventFlicker] ) : Ext.Element 为鼠标移入移出事件添加和移除css类(该方法未实际使用preventFlicker参数) addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.KeyMap 为对象添加按键侦听 key由数值或字符串或{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}这样的对象或他们的数组组成 addKeyMap( Object config ) : Ext.KeyMap 功能同addKeyListener,只是传参方式不同 例: el.addKeyMap({key : "ab",ctrl : true,fn: fn,scope:el }); 和 el.addKeyListener({key:"ab",ctrl:true},fn,el); 是等价的,都是在 按下ctral+a或ctrl+b后呼叫fn addListener( String eventName, Function fn, [Object scope], [Object options] ) : void 定义事件侦听,eventName:事件名,fn:事件处理方法,scrope:范围,其中options的定义比较复杂, 可以包含以下属性 scope {Object} : 处理fn的范围 delegate {String} : 一个简单选择器(过滤目标或寻找目标的子孙节点) stopEvent {Boolean} : 阻止事件,等于preventDefault+stopPropagation preventDefault {Boolean} : 阻止默认活动 stopPropagation {Boolean} : 阻止事件冒泡 normalized {Boolean} :设为flase将允许浏览器事件替代Ext.EventObject delay {Number} : 延时多少毫秒后发生 single {Boolean} : 只运行一次 分区 2010-05 的第 8 页 buffer {Number} : 在Ext.util.DelayedTask中预定事件 当然,还可能自定义参数以传入function alignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : Ext.Element 将el对齐到element,positon,指示对齐的位置,可选以下定义 tl 左上角(默认) t 上居中 tr 右上角 l 左边界的中央 c 居中 r 右边界的中央 bl 左下角 b 下居中 br 右下角 position还可以使用?约束移动不能超出窗口 offsets 偏移量,以象素为单位 animate 详见animate定义 例:div1.alignTo('div2','c-bl?',[20,0],true); 采用默认动画将div1的最中央对齐到div2的左下角,并右移20个象素,且不能超出窗口 anchorTo( Mixed element, String position, [Array offsets], [Boolean/Object animate], [Boolean/Number monitorScroll], Function callback ) : Ext.Element 功能和alignTo类似,只是当窗口重定义大小的时候也会引发重对齐事件 monitorScroll参数说明是否需要监视滚动条行为,如果定义为数值则是定义的延时,单位为毫秒,默认 是50ms, callback定义了animate完成后的回叫方法 animate( Object args, [Float duration], [Function onComplete], [String easing], [String animType] ) : Ext.Element 执行动画. args:目标 duration:时间间隔.默认是0.35 Function:完成后的回叫方法 easing:行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的 easeNone:匀速 easeIn:开始慢且加速 easeOut:开始快且减速 easeBoth:开始慢且减速 easeInStrong:开始慢且加速,t的四次方 easeOutStrong:开始快且减速,t的四次方 easeBothStrong:开始慢且减速,t的四次方 elasticIn: elasticOut: elasticBoth: backIn: backOut: backBoth: bounceIn: bounceOut: bounceBoth: 太多,慢慢体会吧 animType:定义动画类型,默认值run 可选值:color/motion/scroll appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element 添加子元素el(el须已存在) 分区 2010-05 的第 9 页 appendTo( Mixed el ) : Ext.Element 将当前元素添加到el applyStyles( String/Object/Function styles ) : Ext.Element 应用样式,styles是"width:100px"这样的字符串或{width:"100px"}这样的对象,function是指 返回这样的字串和对象的函数,这是一个没有用的批示,因为任何传参的地方都可以是返回要求类型的 function.另见setStyle autoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : Ext.Element 自适应高度,参数都是老相识了,惟一需要注意的是这个方法使用了setTimeout,高度不会马上变更 blur() : Ext.Element 失去焦点,忽略所有的异常 boxWrap( [String class] ) : Ext.Element 用一个指定样式class的div将当前元素包含起来,class默认值为x-box center( [Mixed centerIn] ) : void alignTo的简华版.相当于alignTo(centerIn || document, 'c-c'),当前元素的中心对齐到 centerIn元素的中心 child( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element 依selector选择子孙节点,依returnDom不同批示返回html元素还是ext元素,未定义或false时返回 Ext.Element clean( [Boolean forceReclean] ) : void 清除无用的空白文本节点(我喜欢这个想法) clearOpacity() : Ext.Element 清除当前元素样式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/- khtml-opacity clearPositioning( [String value] ) : Ext.Element 清除定位,恢复到默认值,相当于 this.setStyle({"left": value,"right": value,"top": value,"bottom": value,"z- index": "","position" : "static"}); clip() : Ext.Element 裁剪溢出部分,用unclip()恢复 contains( HTMLElement/String el ) : Boolean 当前元素中是否存在el createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.Element 创建一个新的子节点 config :DomHelper元素对象,如果没有特别指明tag,将使用div做默认tag,详情参见DomHelper, 如果未定义insertBefore,则追加 createProxy( String/Object config, [String/HTMLElement renderTo], [Boolean matchBox] ) : Ext.Element 创建一个代理元素 config:代理元素的类名或DomHelper config对象 renderTo:将要绘制代理元素的html element或id matchBox:是否对齐 createShim() : Ext.Element 在当前元素之前创建一个classname为ext-shim的iframe,有什么用? down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element 通过样式选择器selector选择子孙节点 enableDisplayMode( [String display] ) : Ext.Element setVisibilityMode的简便方法 findParent( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement 通过简单选择器selector寻找祖先节点 ,直到maxDepth(元素maxDepth默认为10,也可以是指定的 DOM 节点),找不到返回null findParentNode( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement 从父元素开始使用简单选择器selector选择DOM节点 first( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 分区 2010-05 的第 10 页 得到第一个符合selector条件的子节点,跳过文本节点 focus() : Ext.Element 得到焦点 getAlignToXY( Mixed element, String position, [Array offsets] ) : Array 得到当前元素按position规则对齐到element时的XY坐标值 position/offsets参数参见alignTo 方法 getAnchorXY( [String anchor], [Object size], [Boolean local] ) : Array 得到当前元素锚点指定的坐标值 anchor定义参见alignTo方法,默认为c getAttributeNS( String namespace, String name ) : String 得到使用了命名空间namespace的属性name之值, getBorderWidth( String side ) : Number 得到side指定的边框之和,side可以是t, l, r, b或他们的任意组合,比如 getBorderWidth("lr")就是得到左边框和右边框之和 getBottom( Boolean local ) : Number 得到当前元素的底部纵坐标,元素纵坐标+元素高度 getBox( [Boolean contentBox], [Boolean local] ) : Object 得到当前元素的box对象:{x,y,width,height} getCenterXY() : Array 如果当前元素要居中对齐时的横纵坐标值,等价getAlignToXY(document, 'c-c') getColor( String attr, String defaultValue, [String prefix] ) : void 得到当前元素指定attr的颜色值,如果没指定,返回defualtValue,比较郁闷的是明明不是void为什 么api中批示是一个void?应该是个字符串 getComputedHeight() : Number 得到计算过的高度,得到offsetHeight或css中定义的height值之一,如果使用了 padding/borders,也会计算进去 getComputedWidth() : Number 见getComputedHeight getFrameWidth( String sides ) : Number 得到sides定义的border宽度和padding定义的宽度之和,side定义见getBorderWidth getHeight( [Boolean contentHeight] ) : Number 返回元素的offsetHeight getLeft( Boolean local ) : Number 得到横坐标 getMargins( [String sides] ) : Object/Number 如果没有定义sides,则返回一个含有{left,top,width,height}对象,反之返回side指定的宽 度,side定义见getBorderWidth getOffsetsTo( Mixed element ) : Array 计算从element到当前元素的偏移量 getPadding( String side ) : Number 得到由side指定的padding之和 getPositioning() : Object 得到当前元素的位置信息 返回含以下属性的对象{position,left,right,top,bottom,z-index} getRegion() : Region 得到当前元素的区域信息 返回含有以下属性的Ext.lib.Region对象{top, left, bottom, right} getRight( Boolean local ) : Number 右边界值 getScroll() : Object 得到一个批示滚动条位置的对象{left, top} getSize( [Boolean contentSize] ) : Object 得到宽度和高度组成的对象信息{width,height} getStyle( String property ) : String 得到指定的样式值 getStyles简化版 getStyles( String style1, String style2, String etc. ) : Object 得到由参数组成的对象 例:el.getStyles('color', 'font-size', 'width') 分区 2010-05 的第 11 页 可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'} getTop( Boolean local ) : Number 得到顶点纵坐 标 getUpdater() : Ext.Updater 得到当前元素的Updater对象,参见Ext.Updater类 getValue( Boolean asNumber ) : String/Number 得到value属性的值 getViewSize() : Object 得到clientHeight和clientWidth信息给成的对象{width,height} getWidth( [Boolean contentWidth] ) : Number ..这样的方法真多 getX() : Number getXY() : Array getY() : Array 得到页面偏移量,也就是绝对坐标 hasClass( String className ) : Boolean 样式类className 存在于当前元素的dom 节点中 hide( [Boolean/Object animate] ) : Ext.Element 隐藏当前元素 hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element 设置鼠标移入移出事件 initDD( String group, Object config, Object overrides ) : Ext.dd.DD initDDProxy( String group, Object config, Object overrides ) : Ext.dd.DDProxy initDDTarget( String group, Object config, Object overrides ) : Ext.dd.DDTarget 这个要放到 Ext.dd去专门搞了,用于拖曳 insertAfter( Mixed el ) : Ext.Element insertBefore( Mixed el ) : Ext.Element insertFirst( Mixed/Object el ) : Ext.Element 在DOM中el元素之前之后...插入当前元素 insertHtml( String where, String html, Boolean returnEl ) 插入html内容 where 可选beforeBegin, afterBegin, beforeEnd, afterEnd insertSibling( Mixed/Object/Array el, [String where], [Boolean returnDom] ) : 插入或创建el做为当前元素的兄弟节点,where可选before/after,默认为before is( String selector ) : Boolean 验证当前节点是否匹配简单选择器selector isBorderBox() 测试不同的样式规则以决定当前元素是否使用一个有边框的盒子 isDisplayed() : Boolean 只要不是指定display属性none都会返回真 isMasked() : Boolean 仅有当前元素有mask并且可见时为真,mask译为蒙片?就是有些输入框没得到值之前会有一行模糊的提 示的那种东西 isScrollable() : Boolean 可以滚动? isVisible( [Boolean deep] ) : Boolean 可见? last( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 见first load( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : Ext.Element 直接应用当前updater的update方法 mask( [String msg], [String msgCls] ) : Element 为当前对象创建蒙片 move( String direction, Number distance, [Boolean/Object animate] ) : Ext.Element 分区 2010-05 的第 12 页 相前元素相对于当前位置移动, direction批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down". distance,指示要移动的距离,以像素为单位 moveTo( Number x, Number y, [Boolean/Object animate] ) : Ext.Element 称动到指定的位置 next( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 下一个符合selector的兄弟节点, on( String eventName, Function fn, [Object scope], [Object options] ) : void 详见addListener position( [String pos], [Number zIndex], [Number x], [Number y] ) : void 初始化当前元素的位置 pos可选择relative/absolute/fixed prev( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 前一个符合selector的兄弟节点 query( String selector ) : Array 通过样式选择器选择子节点 radioClass( String/Array className ) : Ext.Element 添加样式或样式数组到当前元素,并移除兄弟节点中的指定样式 relayEvent( String eventName, Object object ) : void 将当前元素的eventName事件同时转发给object对象 remove() : void 从当前DOM中删除元素,并从缓存中移除 removeAllListeners() : Ext.Element 移除所有的侦听者 removeClass( String/Array className ) : Ext.Element 移除样式类 removeListener( String eventName, Function fn ) : Ext.Element 移除事件eventName的fn侦听器 repaint() : Ext.Element 强制浏览器重绘当前元素 replace( Mixed el ) : Ext.Element 用当前元素替换el replaceClass( String oldClassName, String newClassName ) : Ext.Element 替换样式类 replaceWith( Mixed/Object el ) : Ext.Element 用el替换当前元素 scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean 滚动,scroll会保证元素不会越界,direction和distance参数见move scrollIntoView( [Mixed container], [Boolean hscroll] ) : Ext.Element 滚动到container内的视图 scrollTo( String side, Number value, [Boolean/Object animate] ) : Element 基本与scroll方法相同,但不保证元素不越界 select( String selector, [Boolean unique] ) : 与query不同的是,通过样式选择器selector,select方法会返回一个复合元素对象 (CompositeElement)或CompositeElementLite, set( Object o, [Boolean useSet] ) : Ext.Element 设置属性,例 el.set({width:'200px',height:'200px'}); setBottom( String bottom ) : Ext.Element setLeft( String left ) : Ext.Element setRight( String right ) : Ext.Element setTop( String top ) : Ext.Element setLeftTop( String left, String top ) : Ext.Element 设置css 对象的属性值 setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element 分区 2010-05 的第 13 页 马上改变当前元素的位置和尺寸 setBox( Object box, [Boolean adjust], [Boolean/Object animate] ) : Ext.Element 为当前元素设置一个盒子box:{x, y, width, height},adjust指示是否马上调整尺寸 setDisplayed( Boolean value ) : Ext.Element 设置可见性 setHeight( Number height, [Boolean/Object animate] ) : Ext.Element setWidth( Number width, [Boolean/Object animate] ) : Ext.Element setSize( Number width, Number height, [Boolean/Object animate] ) : Ext.Element 设置高度和宽度 setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element 设置当前元素相对于页面的横纵坐标 setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element 设置透明度,opacity为1完全不透明,0完全透明 setPositioning( Object posCfg ) : Ext.Element 为当前元素指定位置信息,参数posCfg参见getPositioning说明 setRegion( Ext.lib.Region region, [Boolean/Object animate] ) : Ext.Element 为当前元素指定区域信息 region定义 见getRegion setStyle( String/Object property, [String value] ) : Ext.Element 设置样式 setVisibilityMode( visMode Element.VISIBILITY ) : Ext.Element 指示是使用Element.VISIBILITY还是Element.DISPLAY属性来定义可见性 setVisible( Boolean visible, [Boolean/Object animate] ) : Ext.Element 设置可见性 setX( Number The, [Boolean/Object animate] ) : Ext.Element setXY( Array pos, [Boolean/Object animate] ) : Ext.Element setY( Number The, [Boolean/Object animate] ) : Ext.Element 设置当前元素相对于page的位置 show( [Boolean/Object animate] ) : Ext.Element 显示当前元素 swallowEvent( String eventName, [Boolean preventDefault] ) : Ext.Element 阻止eventName事件冒泡,并视preventDefault阻断默认行为 toggle( [Boolean/Object animate] ) : Ext.Element 切换元素的visibility 或display属性,依赖于setVisibilityMode设定的 toggleClass( String className ) : Ext.Element 如果样式名存在于当前元素对应的dom 节点,移除,反之应用 translatePoints( Number/Array x, Number y ) : Object 返回一个{left,top}结构 un( String eventName, Function fn ) : Ext.Element 解除事件侦听,参见 removeListener unclip() : Ext.Element 见clip; unmask() : void 见mask; unselectable(): Ext.Element 禁止文本选择 up( String selector, [Number/Mixed maxDepth] ) : Ext.Element 通过样式选择器selector选择祖先节点 update( String html, [Boolean loadScripts], Function callback ) : Ext.Element 利用html更新当前节点内容,loadScripts指示html中如果有script,是否需要运行,这是一个 innerHTML的一个老老老问题了 wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element 用另一个元素config包含自己 EXT核心API详解(四) - Ext.DomQuery/DomHelper/Template 分区 2010-05 的第 14 页 Ext.DomQuery类 selector语法详见Ext类 compile( String selector, [String type] ) : Function 编写一个选择器或xpath查询到一个方法以方便重用,type取select(默认)或simple值之一 filter( Array el, String selector, Boolean nonMatches ) : Array 过滤el中的元素,保留符合selector的,如果nonMatches为真,结果相反 is( String/HTMLElement/Array el, String selector ) : Boolean 验证el是否匹配selector select( String selector, [Node root] ) : Array 从root中选择匹配selector的对象数组 selectNode( String selector, [Node root] ) : Element 返回root中第一个匹配selector的对象 selectNumber( String selector, [Node root], Number defaultValue ) : Number 返回root中第一个匹配selector的对象的节点值,转换为整数或浮点数 selectValue( String selector, [Node root], String defaultValue ) : void 返回root中第一个匹配selector的对象的节点值,如果为null,用默认值defaultValue代替 Ext.DomHelper类 append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element 创建一个新的DOM元素并添加到el 参数 o 是一个DOM对象或一个原始html块 applyStyles( String/HTMLElement el, String/Object/Function styles ) : void 应用样式styles到对象el, 样式的对象表示方法见Ext.Element createTemplate( Object o ) : Ext.Template 由o创建一个新的Ext.Template对象,详见 Ext.Template insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element 创建一个新的DOM对象o并将他们挺入在el之后/之前 insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) : 创建一个新的DOM元素并做为第一个子节点添加到el (看了这个insertFirst,建议将append取一个 别名insertLast:)) insertHtml( String where, HTMLElement el, String html ) : HTMLElement where 可选值beforeBegin/afterBegin/beforeEnd/afterEnd 将html代码插入到el附近, markup( Object o ) : String 返回DOM对象o对应的html代码 overwrite( Mixed el, Object/String o, [Boolean returnElement] ) : 创建一个新的DOM元素o并用它重写el的内容 Ext.Template类 Template类主要是功能是生产html片断,例 var t = new Ext.Template( '
', '{name:trim} {value:ellipsis(10)}', '
' ); t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); 公用方法: Template( String/Array html ) 构造一个Ext.Template对象,参数可以是字符串形式的html代码或它们组成的数组, Template.from( String/HTMLElement el, Object config ) : Ext.Template 能过el的value(优先)或innerHTML来构造模板 append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element 分区 2010-05 的第 15 页 insertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element insertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element insertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element 这组方法提供由 value产生的html 代码,并添加到dom 做为el的最后一个子节点/下一个兄弟节点/ 前一个兄弟节点/第一个子节点 values解释参见applyTemplate apply() : void applyTemplate( Object values ) : String apply是applyTemplate的简写,如果参数是数字values可以是一个数组,或者一个象 {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}这样的json对象 compile() : Ext.Template 编译模板,替换掉模板中的\=>\\ ,\r\n|\n==>\\n, '=\',主要是为了js自己处理方便 overwrite( Mixed el, Object values, [Boolean returnElement] ) : 利用values生成html替换el的内容 set( String html, [Boolean compile] ) : Ext.Template 设置模板的html,如果compile为真将调用compile方法 EXT核心API详解(五) - Ext.EventManager Ext.EventManager 事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理 addListener( String/HTMLElement el, String eventName, Function handler, on( String/HTMLElement el, String eventName, Function handler, [Object scope], [Object options] ) : void onDocumentReady( Function fn, [Object scope], [boolean options] ) : void removeListener( String/HTMLElement el, String eventName, Function fn ) : un( String/HTMLElement el, String eventName, Function fn ) : Boolean 参见Ext onWindowResize( Function fn, Object scope, boolean options ) : void 窗口大小变更时触发 onTextResize( Function fn, Object scope, boolean options ) : void 活动文本尺寸变更时触发 Ext.EventObject 这两个类都定义在EventManager.js中,分开是为了逻辑上更清晰吧,这个类主要用于描述事件本身, 一般用做事件处理方法的参数 另外这个害定义了一些键值常量,比ascii码好记 例 function handleClick(e){ // 这儿的e就是一个EventObject对象 e.preventDefault(); var target = e.getTarget(); ... } var myDiv = Ext.get("myDiv"); myDiv.on("click", handleClick); //or Ext.EventManager.on("myDiv", 'click', handleClick); Ext.EventManager.addListener("myDiv", 'click', handleClick); getCharCode() : Number getKey() : Number 在非webkit|khtml类型网页中这两个方法是一样的,得到按键的值 getPageX() : Number getPageY() : Number getXY() : Array 得到事件坐标 分区 2010-05 的第 16 页 getRelatedTarget() : HTMLElement 得到关联目标?我总是得到null getTarget( [String selector], [Number/Mixed maxDepth], [Boolean returnEl] ) : 如果没有定义selector则直接返回target属性,如果定义了selector,则利用selector寻找祖先节 点 getTime() : Number 得到事件发生的时间? getWheelDelta() : Number 应该是个过时的方法,反正在ie和火狐下都不知道做什么用的,原意应该是得到鼠标的按键信息? hasModifier() : Boolean 事件发生时是否同时按下了ctrl/alt/shift键之一? preventDefault() : void 阻止浏览器的默认事件? stopEvent() : void preventDefault+stopPropagation stopPropagation() : void 阻止事件冒泡 within( Mixed el, [Boolean related] ) : Boolean 如果事件的目标是el或者它的子节点将返回真 Ext.CompositeElement类 基础的复合元素类,为容器中每个元素创建一个Ext.Element对象 虽然不是继承自Ext.Element,但事实上它几乎支持Element类的所有方法 例: 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,当前复合元素中是否含有el each( Function fn, [Object scope] ) : CompositeElement 通过el,this,index参数为每个元素调用fn fill( String/Array els ) : CompositeElement clear()& add(els) filter( String selector ) : CompositeElement 过滤 first() : Ext.Element 第一个元素 getCount() : Number //元素的数量 indexOf() : Boolean 同contains一样应该有个Mixed参数 item( Number index ) : Ext.Element 第index个元素 last() : Ext.Element 最后一个元素 removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement 删除el元素 replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement 替换 Ext.CompositeElementLite 由Ext.CompositeElement继承而来,重写了一些方法,但没看出与父类有什么不同 addElements /invoke /item /addListener /each /indexOf /replaceElement EXT核心API详解(六) - Ext.Fx 分区 2010-05 的第 17 页 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 右下角 分区 2010-05 的第 18 页 例: el.ghost('b', { easing: 'easeOut', duration: .5 remove: false, useDisplay: false }); hasActiveFx() : Boolean 指示元素是否当前有特效正在活动 hasFxBlock() : Boolean 是否有特效阻塞了 highlight( [String color], [Object options] ) : Ext.Element 高亮显示当前元素 例:el.highlight("ffff9c", { attr: "background-color", //can be any valid CSS property (attribute) that supports a color value endColor: (current color) or "ffffff", easing: 'easeIn', duration: 1 }); pause( Number seconds ) : Ext.Element 暂停 puff( [Object options] ) : Ext.Element 吹,吹,吹个大气球,元素渐大并隐没 例:el.puff({ easing: 'easeOut', duration: .5, remove: false, useDisplay: false }); scale( Number width, Number height, [Object options] ) : Ext.Element 缩放 例:el.scale( [element's width], [element's height], { easing: 'easeOut', duration: .35 }); sequenceFx() 排队特效 shift( Object options ) : Ext.Element 位移,并可重置大小,透明度等 例: el.shift({ width: [element's width], height: [element's height], x: [element's x position], y: [element's y position], opacity: [element's opacity], easing: 'easeOut', duration: .35 }); slideIn( [String anchor], [Object options] ) : Ext.Element slideOut( [String anchor], [Object options] ) : Ext.Element 滑入/滑出 例:el.slideIn('t', { easing: 'easeOut', duration: .5 }); stopFx() : Ext.Element 分区 2010-05 的第 19 页 停止特效 switchOff( [Object options] ) : Ext.Element 收起并隐没 例: el.switchOff({ easing: 'easeIn', duration: .3, remove: false, useDisplay: false }); syncFx() : Ext.Element 异步特效 EXT核心API详解(七) - Ext.KeyNav Ext.KeyNav Ext的keyNav类能为Ext.Element元素提供简单的按键处理方法 例: var el=Ext.get("textarea"); new Ext.KeyNav(el, { "left" : function(e){ alert("left key down"); }, scope : el } ); 它的行为与KeyMap类似,但功能比KeyMap要弱小的多,只能处理以下已定义键 enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end 同情一下KeyNav 方法只有三个,不用多解释 KeyNav( Mixed el, Object config ) disable() : void enable() : void Ext.KeyMap类 则强悍的多,其中最重要的当然是对按键的定义更灵活 例:上例用KeyMap来写可能是 var el=Ext.get("textarea"); new Ext.KeyMap(el, { key:Ext.EventObject.LEFT, fn: function(e){ alert("left key down"); }, scope : el } ); 方法 KeyMap( Mixed el, Object config, [String eventName] ) 构造,与KeyNav也相似,但更灵活 它是{ key: String/Array, //可以是数字,字符,也可以是Ext.EventObject.LEFT这样的助记符,还 能是他们组成的数组 shift: Boolean, //ctrl键按下? ctrl: Boolean, alt : Boolean, fn : Function, //回叫方法 scope: Object //范围 }这样的对象或它们组成的数组 比如{key: 10},{key: [10,13]},{key:'\t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定义 分区 2010-05 的第 20 页 addBinding( Object/Array config ) : void 增加新的绑定动作 config参见构造 disable() : void enable() : void isEnabled() : Boolean 允许,静止和状态查询 on( Number/Array/Object key, Function fn, [Object scope] ) : void 只添加一个处理时addBinding的快捷方式,但个人感觉并没有简单到哪儿去。 Ext.util.JSON 轮到大名鼎鼎的JSON了,可惜Ext提供的JSON对象功能好弱小,只有encode主decode两个方法 而且只能编码String/Array/Date,至少也要搞个 xml2json/json2xml方法呀 Ext.util.Format 主要提供了一些格式化方法 capitalize( String value ) : String 首字母大写 date( Mixed value, [String format] ) : String 格式化日期输出,还是Date.format方法好用 dateRenderer( String format ) : Function 返回一个利用指定format格式化日期的方法 defaultValue( Mixed value, String defaultValue ) : String 如果value未定义或为空字符串则返回defaultValue ellipsis( String value, Number length ) : String 如果value的长度超过length的,取前length-3个并用...替代,对中国人来说还是垃圾功能,用的 字符串长度不是字节长度 fileSize( Number/String size ) : String 简单的格式化文件长度为 xxxbytes xxxKB xxxMB,没有GB哟 htmlEncode( String value ) : String htmlDecode( String value ) : String HTML编码解码,将& < > “替换为&<>" lowercase( String value ) : String 将value转换为全小写 stripScripts( Mixed value ) : String 去除脚本标签 stripTags( Mixed value ) : String 去除HTML标签 substr( String value, Number start, Number length ) : String 取子字符串 trim( String value ) : String 去除开头和结尾的空格 undef( Mixed value ) : Mixed 如果value未定义,返回空字符串,反之返回value本身 uppercase( String value ) : String 转为全大写 usMoney( Number/String value ) : String 转为美元表示 Ext.util.DelayedTask 提供一个setTimeout的简单替代方法 公开的方法也只有三个 DelayedTask( [Function fn], [Object scope], [Array args] ) delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) : cancel() : void 简单的示例用法如果 var task=new Ext.util.DelayedTask(Ext.emptuFn); task.delay(1000); task.cancel(); Ext.util.TaskRunner 分区 2010-05 的第 21 页 增强版的DelayedTask,能提供多线程的定时服务, 例: var task = { run: function(){ Ext.fly('clock').update(new Date().format('g:i:s A')); }, interval: 1000 } var runner = new Ext.util.TaskRunner(); runner.start(task); 四个方法都很简单 TaskRunner( [Number interval] ) start( [Object task] ) : Object stop( Object task ) : Object stopAll() : void Ext.util.TextMetrics 这个类主要是为了准备的得到块状化文本正确的高度和宽度 例: var metrics=Ext.util.TextMetrics.createInstance('div'); metrics.setFixedWidth(100); var size=metrics.getSize("中华人民共和国中华人民共和国中华人民共和国中华人民共和国"); Ext.MessageBox.alert("getsize",String.format("width:{0}px\theight:{1} px",size.width,size.height)) 方法 bind( String/HTMLElement el ) : void 绑定到el createInstance( String/HTMLElement el, [Number fixedWidth] ) : Ext.util.TextMetrics.Instance 为el创建TextMetrics实例 getHeight( String text ) : Number getSize( String text ) : Object getWidth( String text ) : Number 得到尺寸 measure( String/HTMLElement el, String text, [Number fixedWidth] ) : Object 测算文本text在el中将要占用的尺寸 setFixedWidth( Number width ) : void 设置指定的宽度 Ext.XTemplate 增强型模板,支持更多功能了,虽然方法不多,但用起来来还真的很麻烦,但并不建议大家学习这样的 自定义语法,不如用xslt 另外这个Xtemplate虽然命名空间在Ext之下,但源文件却是放在util目录中的 XTemplate( String/Array html ) XTemplate.from( String/HTMLElement el ) : Ext.XTemplate apply() : void applyTemplate( Object values ) : String compile() : Function 这些方法Ext.Template中都有说明, EXT核心API详解(七) - Ext.KeyNav Ext.KeyNav Ext的keyNav类能为Ext.Element元素提供简单的按键处理方法 例: var el=Ext.get("textarea"); new Ext.KeyNav(el, { "left" : function(e){ alert("left key down"); }, scope : el 分区 2010-05 的第 22 页 } ); 它的行为与KeyMap类似,但功能比KeyMap要弱小的多,只能处理以下已定义键 enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end 同情一下KeyNav 方法只有三个,不用多解释 KeyNav( Mixed el, Object config ) disable() : void enable() : void Ext.KeyMap类 则强悍的多,其中最重要的当然是对按键的定义更灵活 例:上例用KeyMap来写可能是 var el=Ext.get("textarea"); new Ext.KeyMap(el, { key:Ext.EventObject.LEFT, fn: function(e){ alert("left key down"); }, scope : el } ); 方法 KeyMap( Mixed el, Object config, [String eventName] ) 构造,与KeyNav也相似,但更灵活 它是{ key: String/Array, //可以是数字,字符,也可以是Ext.EventObject.LEFT这样的助记符,还 能是他们组成的数组 shift: Boolean, //ctrl键按下? ctrl: Boolean, alt : Boolean, fn : Function, //回叫方法 scope: Object //范围 }这样的对象或它们组成的数组 比如{key: 10},{key: [10,13]},{key:'\t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定义 addBinding( Object/Array config ) : void 增加新的绑定动作 config参见构造 disable() : void enable() : void isEnabled() : Boolean 允许,静止和状态查询 on( Number/Array/Object key, Function fn, [Object scope] ) : void 只添加一个处理时addBinding的快捷方式,但个人感觉并没有简单到哪儿去。 Ext.util.JSON 轮到大名鼎鼎的JSON了,可惜Ext提供的JSON对象功能好弱小,只有encode主decode两个方法 而且只能编码String/Array/Date,至少也要搞个 xml2json/json2xml方法呀 Ext.util.Format 主要提供了一些格式化方法 capitalize( String value ) : String 首字母大写 date( Mixed value, [String format] ) : String 格式化日期输出,还是Date.format方法好用 dateRenderer( String format ) : Function 返回一个利用指定format格式化日期的方法 defaultValue( Mixed value, String defaultValue ) : String 如果value未定义或为空字符串则返回defaultValue ellipsis( String value, Number length ) : String 分区 2010-05 的第 23 页 如果value的长度超过length的,取前length-3个并用...替代,对中国人来说还是垃圾功能,用的 字符串长度不是字节长度 fileSize( Number/String size ) : String 简单的格式化文件长度为 xxxbytes xxxKB xxxMB,没有GB哟 htmlEncode( String value ) : String htmlDecode( String value ) : String HTML编码解码,将& < > “替换为&<>" lowercase( String value ) : String 将value转换为全小写 stripScripts( Mixed value ) : String 去除脚本标签 stripTags( Mixed value ) : String 去除HTML标签 substr( String value, Number start, Number length ) : String 取子字符串 trim( String value ) : String 去除开头和结尾的空格 undef( Mixed value ) : Mixed 如果value未定义,返回空字符串,反之返回value本身 uppercase( String value ) : String 转为全大写 usMoney( Number/String value ) : String 转为美元表示 Ext.util.DelayedTask 提供一个setTimeout的简单替代方法 公开的方法也只有三个 DelayedTask( [Function fn], [Object scope], [Array args] ) delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) : cancel() : void 简单的示例用法如果 var task=new Ext.util.DelayedTask(Ext.emptuFn); task.delay(1000); task.cancel(); Ext.util.TaskRunner 增强版的DelayedTask,能提供多线程的定时服务, 例: var task = { run: function(){ Ext.fly('clock').update(new Date().format('g:i:s A')); }, interval: 1000 } var runner = new Ext.util.TaskRunner(); runner.start(task); 四个方法都很简单 TaskRunner( [Number interval] ) start( [Object task] ) : Object stop( Object task ) : Object stopAll() : void Ext.util.TextMetrics 这个类主要是为了准备的得到块状化文本正确的高度和宽度 例: var metrics=Ext.util.TextMetrics.createInstance('div'); metrics.setFixedWidth(100); var size=metrics.getSize("中华人民共和国中华人民共和国中华人民共和国中华人民共和国"); Ext.MessageBox.alert("getsize",String.format("width:{0}px\theight:{1} px",size.width,size.height)) 分区 2010-05 的第 24 页 方法 bind( String/HTMLElement el ) : void 绑定到el createInstance( String/HTMLElement el, [Number fixedWidth] ) : Ext.util.TextMetrics.Instance 为el创建TextMetrics实例 getHeight( String text ) : Number getSize( String text ) : Object getWidth( String text ) : Number 得到尺寸 measure( String/HTMLElement el, String text, [Number fixedWidth] ) : Object 测算文本text在el中将要占用的尺寸 setFixedWidth( Number width ) : void 设置指定的宽度 Ext.XTemplate 增强型模板,支持更多功能了,虽然方法不多,但用起来来还真的很麻烦,但并不建议大家学习这样的 自定义语法,不如用xslt 另外这个Xtemplate虽然命名空间在Ext之下,但源文件却是放在util目录中的 XTemplate( String/Array html ) XTemplate.from( String/HTMLElement el ) : Ext.XTemplate apply() : void applyTemplate( Object values ) : String compile() : Function 这些方法Ext.Template中都有说明, 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, //请求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 分区 2010-05 的第 25 页 scope:Object, //范围 form.:Object/String, //一个form对象或它的id,可以由此自动生成参数params isUpload: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在发起请求前都会调用showSpinner Ext.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 //字段名 分区 2010-05 的第 26 页 mapping : String //用于reader时的映射关系,如果是用于jsonreader,使用相对当前记录的 javascript表达式 //,如果是用于xmlreader,则是相对于记录的domquery表达式,对于ArrayReader,则是序号 type:String //可选值 auto /string/int/float/boolean/date,其中auto是默认值,不进 行转换 sortType : Mixed //排序类型,Ext.data.SortTypes成员之一,参见sortTypes sortDir : String //正序倒序 ASC/DESC值之一 convert : Function //转换函数,这个功能很有用,可自定义,接收当前value返回处理后的 value dateFormat : 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.KeyNav Ext.KeyNav Ext的keyNav类能为Ext.Element元素提供简单的按键处理方法 例: var el=Ext.get("textarea"); new Ext.KeyNav(el, { "left" : function(e){ alert("left key down"); }, scope : el } ); 它的行为与KeyMap类似,但功能比KeyMap要弱小的多,只能处理以下已定义键 enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end 同情一下KeyNav 方法只有三个,不用多解释 KeyNav( Mixed el, Object config ) disable() : void enable() : void Ext.KeyMap类 则强悍的多,其中最重要的当然是对按键的定义更灵活 例:上例用KeyMap来写可能是 var el=Ext.get("textarea"); new Ext.KeyMap(el, { key:Ext.EventObject.LEFT, fn: function(e){ alert("left key down"); }, scope : el } ); 方法 KeyMap( Mixed el, Object config, [String eventName] ) 分区 2010-05 的第 27 页 构造,与KeyNav也相似,但更灵活 它是{ key: String/Array, //可以是数字,字符,也可以是Ext.EventObject.LEFT这样的助记符,还 能是他们组成的数组 shift: Boolean, //ctrl键按下? ctrl: Boolean, alt : Boolean, fn : Function, //回叫方法 scope: Object //范围 }这样的对象或它们组成的数组 比如{key: 10},{key: [10,13]},{key:'\t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定义 addBinding( Object/Array config ) : void 增加新的绑定动作 config参见构造 disable() : void enable() : void isEnabled() : Boolean 允许,静止和状态查询 on( Number/Array/Object key, Function fn, [Object scope] ) : void 只添加一个处理时addBinding的快捷方式,但个人感觉并没有简单到哪儿去。 Ext.util.JSON 轮到大名鼎鼎的JSON了,可惜Ext提供的JSON对象功能好弱小,只有encode主decode两个方法 而且只能编码String/Array/Date,至少也要搞个 xml2json/json2xml方法呀 Ext.util.Format 主要提供了一些格式化方法 capitalize( String value ) : String 首字母大写 date( Mixed value, [String format] ) : String 格式化日期输出,还是Date.format方法好用 dateRenderer( String format ) : Function 返回一个利用指定format格式化日期的方法 defaultValue( Mixed value, String defaultValue ) : String 如果value未定义或为空字符串则返回defaultValue ellipsis( String value, Number length ) : String 如果value的长度超过length的,取前length-3个并用...替代,对中国人来说还是垃圾功能,用的 字符串长度不是字节长度 fileSize( Number/String size ) : String 简单的格式化文件长度为 xxxbytes xxxKB xxxMB,没有GB哟 htmlEncode( String value ) : String htmlDecode( String value ) : String HTML编码解码,将& < > “替换为&<>" lowercase( String value ) : String 将value转换为全小写 stripScripts( Mixed value ) : String 去除脚本标签 stripTags( Mixed value ) : String 去除HTML标签 substr( String value, Number start, Number length ) : String 取子字符串 trim( String value ) : String 去除开头和结尾的空格 undef( Mixed value ) : Mixed 如果value未定义,返回空字符串,反之返回value本身 uppercase( String value ) : String 转为全大写 usMoney( Number/String value ) : String 分区 2010-05 的第 28 页 转为美元表示 Ext.util.DelayedTask 提供一个setTimeout的简单替代方法 公开的方法也只有三个 DelayedTask( [Function fn], [Object scope], [Array args] ) delay( Number delay, [Function newFn], [Object newScope], [Array newArgs] ) : cancel() : void 简单的示例用法如果 var task=new Ext.util.DelayedTask(Ext.emptuFn); task.delay(1000); task.cancel(); Ext.util.TaskRunner 增强版的DelayedTask,能提供多线程的定时服务, 例: var task = { run: function(){ Ext.fly('clock').update(new Date().format('g:i:s A')); }, interval: 1000 } var runner = new Ext.util.TaskRunner(); runner.start(task); 四个方法都很简单 TaskRunner( [Number interval] ) start( [Object task] ) : Object stop( Object task ) : Object stopAll() : void Ext.util.TextMetrics 这个类主要是为了准备的得到块状化文本正确的高度和宽度 例: var metrics=Ext.util.TextMetrics.createInstance('div'); metrics.setFixedWidth(100); var size=metrics.getSize("中华人民共和国中华人民共和国中华人民共和国中华人民共和国"); Ext.MessageBox.alert("getsize",String.format("width:{0}px\theight:{1} px",size.width,size.height)) 方法 bind( String/HTMLElement el ) : void 绑定到el createInstance( String/HTMLElement el, [Number fixedWidth] ) : Ext.util.TextMetrics.Instance 为el创建TextMetrics实例 getHeight( String text ) : Number getSize( String text ) : Object getWidth( String text ) : Number 得到尺寸 measure( String/HTMLElement el, String text, [Number fixedWidth] ) : Object 测算文本text在el中将要占用的尺寸 setFixedWidth( Number width ) : void 设置指定的宽度 Ext.XTemplate 增强型模板,支持更多功能了,虽然方法不多,但用起来来还真的很麻烦,但并不建议大家学习这样的 自定义语法,不如用xslt 另外这个Xtemplate虽然命名空间在Ext之下,但源文件却是放在util目录中的 XTemplate( String/Array html ) XTemplate.from( String/HTMLElement el ) : Ext.XTemplate apply() : void applyTemplate( Object values ) : String compile() : Function 分区 2010-05 的第 29 页 这些方法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, //请求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 //是否禁用缓存?默认为真 } 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' 分区 2010-05 的第 30 页 }); //所有的Ext.Ajax请求都会加个这个默认的头 Ext.Ajax.defaultHeaders = { 'Powered-By': 'Ext' }; //所有的Ext,Ajax在发起请求前都会调用showSpinner Ext.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成员之一,参见sortTypes sortDir : String //正序倒序 ASC/DESC值之一 convert : Function //转换函数,这个功能很有用,可自定义,接收当前value返回处理后的 value dateFormat : 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 分区 2010-05 的第 31 页 EXT核心API详解Ext.data(九)-DataProxy 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.HttpProxy api文档中说httpProxy是从object继承来的,事实上source中它和下面的 Ext.data.MemoryProxy/Ext.data.ScriptTagProxy都继承于DataProxy HttpProxy用于远程代理,而且服务端返回信息时必须指定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数据块,并激发callback params: 发起http请求时所要传递到服务端的参数 DataReader: 见DataReader callback: 回叫方法,第一个参数为接收到的信息,第二个参数为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.MemoryProxy MemoryProxy( 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}, 分区 2010-05 的第 32 页 [ {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 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}, 分区 2010-05 的第 33 页 //定义数组到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.XmlReader 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", 分区 2010-05 的第 34 页 "Gardener", "", "", "2", "Ben", "Horticulturalist", "", ""].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(十)-DataReader 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'] ]; 分区 2010-05 的第 35 页 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.XmlReader 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=["", "", 分区 2010-05 的第 36 页 "2", "", "1", "Bill", "Gardener", "", "", "2", "Ben", "Horticulturalist", "", ""].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 Ext.data.Store store是一个为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 到store addSorted( Ext.data.Record record ) : void 增加record到store并排序(仅本地排序时有用) clearFilter( Boolean suppressEvent ) : void 清除过滤器 分区 2010-05 的第 37 页 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 ) : Ext.data.Record getById( 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 ) : Number indexOfId( 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] ) : MixedCollection 分区 2010-05 的第 38 页 queryBy( 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文件内容为 分区 2010-05 的第 39 页 2 1 Bill Gardener 2 Ben Horticulturalist 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(十)-DataReader 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 用于读数组到一个元数据对象 分区 2010-05 的第 40 页 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.XmlReader xmlreader对象当然是为xml而准备的 构造: XmlReader( Object meta, Mixed recordType ) meta与jsonreader类似, meta是一个{ 分区 2010-05 的第 41 页 id : String, record : String, success : String, totalRecords : String }对象,只是这些字符串都是相对于文档根目录的domquery路径 read( Object response ) : Object readRecords( Object doc ) : Object .... var str=["", "", "2", "", "1", "Bill", "Gardener", "", "", "2", "Ben", "Horticulturalist", "", ""].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 Ext.data.Store store是一个为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, //远程排序? 分区 2010-05 的第 42 页 sortInfo : Object, //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象 url : String, //利用url构造HttpProxy } add( Ext.data.Record[] records ) : void 增加记录records 到store addSorted( 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和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 ) : Ext.data.Record getById( 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 ) : Number indexOfId( 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数组 分区 2010-05 的第 43 页 //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都没有传入,则取最后一次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 ] ) 分区 2010-05 的第 44 页 //构建Store var store=new Ext.data.Store(...{ proxy:proxy, reader:reader }); //载入 store.load(); 示例2 //得到远程xml文件 //其中xml文件内容为 2 1 Bill Gardener 2 Ben Horticulturalist 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 Ext.data.GroupingStore 继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用 GroupingStore时必须指定sortInfo信息 增加了配置属性 groupField : String//用于分组的字段 groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假 分区 2010-05 的第 45 页 remoteGroup : Boolean//远程排序 当然也会多一个group方法 groupBy( String field, [Boolean forceRegroup] ) : void 顾名思义都是重新排序用的 下面是个简单的示例 var arr=[ [1, '本', '拉登'], [2, '笨', '拉登'],[3, '笨', '拉灯'] ]; var reader = new Ext.data.ArrayReader( {id: 0}, [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]); var store=new Ext.data.GroupingStore({ reader:reader, groupField:'name', groupOnSort:true, sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定 sortInfo信息 }); store.loadData(arr); //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'] }) 分区 2010-05 的第 46 页 //目前请先略过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(十)-DataReader 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 分区 2010-05 的第 47 页 {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.XmlReader 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", 分区 2010-05 的第 48 页 "Bill", "Gardener", "", "", "2", "Ben", "Horticulturalist", "", ""].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 Ext.data.Store store是一个为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 到store addSorted( Ext.data.Record record ) : void 增加record到store并排序(仅本地排序时有用) clearFilter( Boolean suppressEvent ) : void 清除过滤器 collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array 收集由dataIndex指定字段的惟一值 分区 2010-05 的第 49 页 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 ) : Ext.data.Record getById( 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 ) : Number indexOfId( 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] ) : MixedCollection queryBy( Function fn, [Object scope] ) : MixedCollection 查询,参数和find类似,但返回所有符合条件的record,而不是第一个符合条件记录的序号 rejectChanges() : void 分区 2010-05 的第 50 页 放弃所有的变更 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文件内容为 2 分区 2010-05 的第 51 页 1 Bill Gardener 2 Ben Horticulturalist 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 Ext.data.GroupingStore 继承自Ext.data.Store,为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 Ext.data.ArrayReader( {id: 0}, [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]); 分区 2010-05 的第 52 页 var store=new Ext.data.GroupingStore({ reader:reader, groupField:'name', groupOnSort:true, sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定 sortInfo信息 }); store.loadData(arr); //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 分区 2010-05 的第 53 页 从数组对象更方便的创建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 : String id lastChild : Node 最后一个子节点 nextSibling : Node 下一个兄弟节点 parentNode : Node 父节点 previousSibling : Node 分区 2010-05 的第 54 页 前一个兄弟节点 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 ) : Number node在当前节点的子节点中的位置 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排序子节点 EXT核心API详解Ext.data(十)-DataReader Ext.data.DataReader 纯虚类,从数据源得到结构化数据转换为元数据对象,对象包含Record的集合,一般用做Store对象的元 数据, 具有如下格式 { totalRecord:int, records:Array of Ext.data.Record } 具体使用参见三个子类 Ext.data.ArrayReader/Ext.data.JsonReader/Ext.data.XmlReader 方法 分区 2010-05 的第 55 页 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.XmlReader xmlreader对象当然是为xml而准备的 分区 2010-05 的第 56 页 构造: 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", "", "", "2", "Ben", "Horticulturalist", "", ""].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 Ext.data.Store store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表 方法:不列举继承来的方法 Store( Object config ) 构造,config定义为{ autoLoad : Boolean/Object, //自动载入 baseParams : Object, //只有使用httpproxy时才有意义 data : Array, //数据 分区 2010-05 的第 57 页 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 到store addSorted( 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和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 ) : Ext.data.Record getById( 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 ) : Number indexOfId( String id ) : Number 由记录或id得到序号 insert( Number index, Ext.data.Record[] records ) : void 在指定的位置插入记录,并引发add事件 isFiltered() : Boolean 当前设置了过滤器则返回真 load( Object options ) : void 由指定的Proxy使用指定的reader读取远程数据 options定义为 分区 2010-05 的第 58 页 { 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] ) : MixedCollection queryBy( 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得到 },[ 分区 2010-05 的第 59 页 ...{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文件内容为 2 1 Bill Gardener 2 Ben Horticulturalist 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 Ext.data.GroupingStore 继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用 GroupingStore时必须指定sortInfo信息 分区 2010-05 的第 60 页 增加了配置属性 groupField : String//用于分组的字段 groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假 remoteGroup : Boolean//远程排序 当然也会多一个group方法 groupBy( String field, [Boolean forceRegroup] ) : void 顾名思义都是重新排序用的 下面是个简单的示例 var arr=[ [1, '本', '拉登'], [2, '笨', '拉登'],[3, '笨', '拉灯'] ]; var reader = new Ext.data.ArrayReader( {id: 0}, [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]); var store=new Ext.data.GroupingStore({ reader:reader, groupField:'name', groupOnSort:true, sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定 sortInfo信息 }); store.loadData(arr); //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' } ]}, 分区 2010-05 的第 61 页 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 节点 分区 2010-05 的第 62 页 属性 attributes : Object 节点属性集 childNodes : Array 子节点 firstChild : Node 第一个子节点 id : String id 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 ) : Number node在当前节点的子节点中的位置 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 分区 2010-05 的第 63 页 用指定的fn排序子节点 EXT核心API详解Ext.widgets(十四)-Button Ext.Action action实现一个脱离了容 器的事件,所有它可以在多个容器之间共享,不过好象只有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() : void enable() : void setDisabled( Boolean disabled ) : void 禁止/允许 each( Function fn, Object scope ) : void 为每个实现了此action的componet应用fn 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){ 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 按下? 分区 2010-05 的第 64 页 方法 [继承来的忽略] 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,//是否需要重复定义鼠标按下事件,也可以是一个 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 //切换按下状态 示例: Untitled Page 分区 2010-05 的第 65 页 /*--加入样式背景好直观一点*/ .x-btn-pressed button{ background-color:red; } 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 }); }); Ext.SplitButton 上例中的带菜单按钮还不专业,于是有了Ext.SplitButton,专门为带有下拉菜单的按钮设计的 方法: SplitButton( Object config ) 分区 2010-05 的第 66 页 构造,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, //前导text showText : Boolean, //追加item的text到按钮显示 } getActiveItem() : Ext.menu.CheckItem setActiveItem( 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' } ], 分区 2010-05 的第 67 页 changeHandler:function(btn, item){ Ext.MessageBox.alert('Change View', item.text); } }); EXT核心API详解Ext.data(十)-DataReader 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,返回一个元数据对象 分区 2010-05 的第 68 页 使用示例: 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.XmlReader 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", "", "", "2", "Ben", "Horticulturalist", "", ""].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" 分区 2010-05 的第 69 页 {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 Ext.data.Store store是一个为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 到store addSorted( 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和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 ) : Ext.data.Record getById( String id ) : Ext.data.Record 依充号/id得到record对象 getCount() : void 得到记录数 getModifiedRecords() : Ext.data.Record[] 分区 2010-05 的第 70 页 得到修改过的记录集 getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Record[] 得到指定范围的记录集合 getSortState() : void 得到排序状态:显然不是void而是返回一个排序对象,同sortInfo一样的结构{field: "fieldName", direction: "ASC|DESC"} getTotalCount() : void 这个对于翻页信息还是很有用的 indexOf( Ext.data.Record record ) : Number indexOfId( 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] ) : MixedCollection queryBy( 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 ) 分区 2010-05 的第 71 页 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文件内容为 2 1 Bill Gardener 2 Ben Horticulturalist 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 }); 分区 2010-05 的第 72 页 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 Ext.data.GroupingStore 继承自Ext.data.Store,为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 Ext.data.ArrayReader( {id: 0}, [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]); var store=new Ext.data.GroupingStore({ reader:reader, groupField:'name', groupOnSort:true, sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定 sortInfo信息 }); store.loadData(arr); //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, 分区 2010-05 的第 73 页 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] ) 分区 2010-05 的第 74 页 以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 : String id 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 分区 2010-05 的第 75 页 得到当前节点的路径,默认attr为id indexOf( Node node ) : Number node在当前节点的子节点中的位置 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排序子节点 EXT核心API详解Ext.widgets(十四)-Button Ext.Action action实现一个脱离了容 器的事件,所有它可以在多个容器之间共享,不过好象只有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() : void enable() : void setDisabled( Boolean disabled ) : void 禁止/允许 each( Function fn, Object scope ) : void 为每个实现了此action的componet应用fn 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){ Ext.MessageBox.alert("点击事件",String.format("您选择了{0}",item.text)); } function showMenu(obj){ Ext.MessageBox.alert("点击下拉",obj.getXTypes() ) 分区 2010-05 的第 76 页 } 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响应的事件,默认是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,//是否需要重复定义鼠标按下事件,也可以是一个 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 //隐藏菜单 分区 2010-05 的第 77 页 initComponent() : void //初始化容器 setHandler( Function handler, [Object scope] ) : void //设置事件处理方法 setText( String text ) : void //设置文本 showMenu() : void //显示菜单 toggle( [Boolean state] ) : void //切换按下状态 示例: Untitled Page /*--加入样式背景好直观一点*/ .x-btn-pressed button{ background-color:red; } 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', 分区 2010-05 的第 78 页 enableToggle:true, toggleGroup:'toggleGroup', handler: onItemCheck }); new Ext.Button({ renderTo:Ext.getBody(), text:'toggle button 2', enableToggle:true, toggleGroup:'toggleGroup', handler: onItemCheck }); }); 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, //前导text showText : Boolean, //追加item的text到按钮显示 } getActiveItem() : Ext.menu.CheckItem 分区 2010-05 的第 79 页 setActiveItem( 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或者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呼叫Ext.applyIf/apply 方法 clearInvalid() : BasicForm 清除当前basicform中所有的非法信息 doAction( String/Object actionName, [Object options] ) : BasicForm 执行预定义的动作actionName,actionName类似"submit","load",也可以是自定义的动作的名字 或一个Ext.form.Action的实例,options类似如下对象{ url :String, 分区 2010-05 的第 80 页 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对象取值到当前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 ) 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 分区 2010-05 的第 81 页 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 : ( 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() : Boolean initComponent() : void setValue( 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 : Boolean enableColors : Boolean 分区 2010-05 的第 82 页 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() : Ext.Toolbar insertAtCursor( String text ) : void pushValue() : void relayCmd( String cmd, [String/Boolean value] ) : void syncValue() : void toggleSourceEdit( [Boolean sourceEdit] ) : void updateToolbar() : void 要提一点的是,要使用HtmlEditor,别忘了先Ext.QuickTips.init(); Ext.form.TextField 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 //Ext.form.VTypes 中定义的vtype类型名,支持简单的类型验证 vtypeText : String//如果不是,则提示 } 方法: TextField( Object config ) 构造 autoSize() : void 自动尺寸 reset() : void 重置 selectText( [Number start], [Number end] ) : void 选择文本 validateValue( Mixed value ) : Boolean 验证值 Ext.form.NumberField 继承自Ext.form.TextField,因为Ext.form.TextField虽然强大,但写起来的确还是有点麻烦,后 分区 2010-05 的第 83 页 面的类都继承自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.TextArea config{ 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旁边加了个下拉按钮,要自己实现onTriggerClick config{ autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"} hideTrigger : Boolean //隐藏trigger,就是右边的那个下拉选择框 triggerClass : String } 事件 onTriggerClick( EventObject e ) : void Ext.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 分区 2010-05 的第 84 页 triggerClass : String } 方法,除了构造,多了两个顾名思义的方法 DateField( Object config ) getValue() : Date setValue( String/Date date ) : void Ext.form.ComboBox 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 //对齐方式,参见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 ) 构造 分区 2010-05 的第 85 页 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 : ( 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(); 分区 2010-05 的第 86 页 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 }), 分区 2010-05 的第 87 页 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(" hello world "); htmleditor.syncValue(); EXT核心API详解Ext.data(十)-DataReader 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 ) 分区 2010-05 的第 88 页 构造 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.XmlReader xmlreader对象当然是为xml而准备的 构造: 分区 2010-05 的第 89 页 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", "", "", "2", "Ben", "Horticulturalist", "", ""].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 Ext.data.Store store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表 方法:不列举继承来的方法 Store( Object config ) 构造,config定义为{ autoLoad : Boolean/Object, //自动载入 baseParams : Object, //只有使用httpproxy时才有意义 data : Array, //数据 proxy : Ext.data.DataProxy,//数据代理 分区 2010-05 的第 90 页 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 到store addSorted( 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和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 ) : Ext.data.Record getById( 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 ) : Number indexOfId( String id ) : Number 由记录或id得到序号 insert( Number index, Ext.data.Record[] records ) : void 在指定的位置插入记录,并引发add事件 isFiltered() : Boolean 当前设置了过滤器则返回真 load( Object options ) : void 由指定的Proxy使用指定的reader读取远程数据 options定义为 { 分区 2010-05 的第 91 页 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] ) : MixedCollection queryBy( 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'}, 分区 2010-05 的第 92 页 ...{name: 'occupation'} //如果name与mapping同名,可以省略mapping ] ) //构建Store var store=new Ext.data.Store(...{ proxy:proxy, reader:reader }); //载入 store.load(); 示例2 //得到远程xml文件 //其中xml文件内容为 2 1 Bill Gardener 2 Ben Horticulturalist 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 Ext.data.GroupingStore 继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用 GroupingStore时必须指定sortInfo信息 分区 2010-05 的第 93 页 增加了配置属性 groupField : String//用于分组的字段 groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假 remoteGroup : Boolean//远程排序 当然也会多一个group方法 groupBy( String field, [Boolean forceRegroup] ) : void 顾名思义都是重新排序用的 下面是个简单的示例 var arr=[ [1, '本', '拉登'], [2, '笨', '拉登'],[3, '笨', '拉灯'] ]; var reader = new Ext.data.ArrayReader( {id: 0}, [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]); var store=new Ext.data.GroupingStore({ reader:reader, groupField:'name', groupOnSort:true, sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定 sortInfo信息 }); store.loadData(arr); //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' } ]}, 分区 2010-05 的第 94 页 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 节点 分区 2010-05 的第 95 页 属性 attributes : Object 节点属性集 childNodes : Array 子节点 firstChild : Node 第一个子节点 id : String id 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 ) : Number node在当前节点的子节点中的位置 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 分区 2010-05 的第 96 页 用指定的fn排序子节点 EXT核心API详解Ext.widgets(十四)-Button Ext.Action action实现一个脱离了容 器的事件,所有它可以在多个容器之间共享,不过好象只有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() : void enable() : void setDisabled( Boolean disabled ) : void 禁止/允许 each( Function fn, Object scope ) : void 为每个实现了此action的componet应用fn 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){ 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 按下? 分区 2010-05 的第 97 页 方法 [继承来的忽略] 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,//是否需要重复定义鼠标按下事件,也可以是一个 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 //切换按下状态 示例: Untitled Page 分区 2010-05 的第 98 页 /*--加入样式背景好直观一点*/ .x-btn-pressed button{ background-color:red; } 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 }); }); Ext.SplitButton 上例中的带菜单按钮还不专业,于是有了Ext.SplitButton,专门为带有下拉菜单的按钮设计的 方法: SplitButton( Object config ) 分区 2010-05 的第 99 页 构造,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, //前导text showText : Boolean, //追加item的text到按钮显示 } getActiveItem() : Ext.menu.CheckItem setActiveItem( 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' } ], 分区 2010-05 的第 100 页 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或者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呼叫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 分区 2010-05 的第 101 页 从一个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 ) 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 } 构造很麻烦的,但还好我们一般不会直接使用field clearInvalid() : void 清除非法信息 getName() : String getRawValue() : Mixed getValue() : Mixed isDirty() : void isValid( Boolean preventMark ) : Boolean markInvalid( String msg ) : void reset() : void 分区 2010-05 的第 102 页 setRawValue( Mixed value ) : void setValue( Mixed value ) : void validate() : 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() : Boolean initComponent() : void setValue( 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 : 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() : Ext.Toolbar insertAtCursor( String text ) : void pushValue() : void relayCmd( String cmd, [String/Boolean value] ) : void syncValue() : void toggleSourceEdit( [Boolean sourceEdit] ) : void updateToolbar() : void 要提一点的是,要使用HtmlEditor,别忘了先Ext.QuickTips.init(); 分区 2010-05 的第 103 页 Ext.form.TextField 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 //Ext.form.VTypes 中定义的vtype类型名,支持简单的类型验证 vtypeText : String//如果不是,则提示 } 方法: TextField( Object config ) 构造 autoSize() : void 自动尺寸 reset() : void 重置 selectText( [Number start], [Number end] ) : void 选择文本 validateValue( Mixed value ) : Boolean 验证值 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.TextArea config{ autoCreate : String/Object //{tag: "textarea", style. 分区 2010-05 的第 104 页 "width:100px;height:60px;", autocomplete: "off"} growMax : Number //1000 growMin : Number //60 preventScrollbars : Boolean //如果为真等于设置overflow: hidden,默认为 false } Ext.form.TriggerField 这个类只要text旁边加了个下拉按钮,要自己实现onTriggerClick config{ autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"} hideTrigger : Boolean //隐藏trigger,就是右边的那个下拉选择框 triggerClass : String } 事件 onTriggerClick( EventObject e ) : void Ext.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() : Date setValue( String/Date date ) : void Ext.form.ComboBox 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 分区 2010-05 的第 105 页 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() : 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的列表项 分区 2010-05 的第 106 页 setEditable( Boolean value ) : void 设editable属性为value setValue( 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, 分区 2010-05 的第 107 页 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 }), 分区 2010-05 的第 108 页 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(" hello world "); 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 分区 2010-05 的第 109 页 添加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位置插入item isVisible() : void 可见? remove( Ext.menu.Item item ) : void 移除item removeAll() : void 移除所有 show( Mixed element, [String position], [Ext.menu.Menu parentMenu] ) : void 相对于element显示当前菜单 showAt( Array xyPosition, [Ext.menu.Menu parentMenu] ) : void 在绝对位置xyposition显示当前菜单 Ext.menu.BaseItem 所有菜单项的基类,继承自Component config { 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无 异 分区 2010-05 的第 110 页 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 ) : void setText( String text ) : void Ext.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 } 分区 2010-05 的第 111 页 下面的示例从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: [ 'Choose a Theme', { 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 } ] 分区 2010-05 的第 112 页 } },{ 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 分区 2010-05 的第 113 页 "{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.data(十)-DataReader 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, 分区 2010-05 的第 114 页 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.XmlReader 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", "", "", "2", "Ben", "Horticulturalist", "", ""].join(""); //生成xmldocument对象 var xmlDocument; if(Ext.isIE){ xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument") xmlDocument.async=false; xmlDocument.resolveExternals = false; xmlDocument.loadXML(str) } 分区 2010-05 的第 115 页 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 Ext.data.Store store是一个为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 到store addSorted( 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和id find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number 找到符合条件的第一条记录,参数同filter findBy( Function fn, [Object scope], [Number startIndex] ) : Number 分区 2010-05 的第 116 页 参见filterBy getAt( Number index ) : Ext.data.Record getById( 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 ) : Number indexOfId( 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] ) : MixedCollection queryBy( 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求和 事件列表 分区 2010-05 的第 117 页 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文件内容为 2 1 Bill Gardener 2 Ben Horticulturalist var proxy=new Ext.data.HttpProxy(...{url:'datasource.xml'}); var reader = new Ext.data.XmlReader(...{ totalRecords: "results", record: "row", id: "id" 分区 2010-05 的第 118 页 }, [ ...{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 Ext.data.GroupingStore 继承自Ext.data.Store,为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 Ext.data.ArrayReader( {id: 0}, [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]); var store=new Ext.data.GroupingStore({ reader:reader, groupField:'name', groupOnSort:true, sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定 sortInfo信息 }); store.loadData(arr); //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({ 分区 2010-05 的第 119 页 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' 分区 2010-05 的第 120 页 }); 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 : String id 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的节点 分区 2010-05 的第 121 页 findChildBy( Function fn, [Object scope] ) : Node 在子节点中找到第一个应用fn返回真的节点 getDepth() : Number 得到当前节点深度,根节点深度为0 getOwnerTree() : Tree 得到当前节点的Tree对象 getPath( [String attr] ) : String 得到当前节点的路径,默认attr为id indexOf( Node node ) : Number node在当前节点的子节点中的位置 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排序子节点 EXT核心API详解Ext.widgets(十四)-Button Ext.Action action实现一个脱离了容 器的事件,所有它可以在多个容器之间共享,不过好象只有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() : void enable() : void setDisabled( Boolean disabled ) : void 禁止/允许 each( Function fn, Object scope ) : void 为每个实现了此action的componet应用fn hide() : void show() : void setHidden( Boolean hidden ) : void 显示/隐藏 setHandler( Function fn, Object scope ) : void setIconClass( String cls ) : void setText( String text ) : void 分区 2010-05 的第 122 页 重新设置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响应的事件,默认是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,//是否需要重复定义鼠标按下事件,也可以是一个 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 分区 2010-05 的第 123 页 //得到焦点 getText() : String //取得文本 hasVisibleMenu() : Boolean //有可视的菜单? hideMenu() : void //隐藏菜单 initComponent() : void //初始化容器 setHandler( Function handler, [Object scope] ) : void //设置事件处理方法 setText( String text ) : void //设置文本 showMenu() : void //显示菜单 toggle( [Boolean state] ) : void //切换按下状态 示例: Untitled Page /*--加入样式背景好直观一点*/ .x-btn-pressed button{ background-color:red; } 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({ 分区 2010-05 的第 124 页 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 }); }); 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 ) 分区 2010-05 的第 125 页 构造,config新增配置项{ changeHandler : Function, //状态切换时的处理事件 items : Array, //items应该是menu item的数组 prependText : String, //前导text showText : Boolean, //追加item的text到按钮显示 } getActiveItem() : Ext.menu.CheckItem setActiveItem( 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或者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 分区 2010-05 的第 126 页 用传入的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对象取值到当前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 ) 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, 分区 2010-05 的第 127 页 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 } 构造很麻烦的,但还好我们一般不会直接使用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 : ( 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() : Boolean initComponent() : void setValue( Boolean/String checked ) : void 事件 check : ( Ext.form.Checkbox this, Boolean checked ) Ext.form.Radio 继承自Ext.form.Checkbox,单选框 多了一个方法 getGroupValue() : String 如果单选框是一组radio 的一部分,取当前选中的值 Ext.form.Hidden 分区 2010-05 的第 128 页 继承自Field,隐藏字段,无新特性 Ext.form.HtmlEditor 继承自Field,这个htmleditor功能太简单了,什么人能扩充一下就好了 config定义{ createLinkText : String // defaultLinkValue : String // http:// 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() : Ext.Toolbar insertAtCursor( String text ) : void pushValue() : void relayCmd( String cmd, [String/Boolean value] ) : void syncValue() : void toggleSourceEdit( [Boolean sourceEdit] ) : void updateToolbar() : void 要提一点的是,要使用HtmlEditor,别忘了先Ext.QuickTips.init(); Ext.form.TextField 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 //Ext.form.VTypes 中定义的vtype类型名,支持简单的类型验证 vtypeText : String//如果不是,则提示 } 方法: TextField( Object config ) 构造 autoSize() : void 自动尺寸 分区 2010-05 的第 129 页 reset() : void 重置 selectText( [Number start], [Number end] ) : void 选择文本 validateValue( Mixed value ) : Boolean 验证值 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.TextArea config{ 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旁边加了个下拉按钮,要自己实现onTriggerClick config{ autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"} hideTrigger : Boolean //隐藏trigger,就是右边的那个下拉选择框 triggerClass : String } 事件 onTriggerClick( EventObject e ) : void Ext.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 //不让选总得给个理由吧 分区 2010-05 的第 130 页 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 setValue( String/Date date ) : void Ext.form.ComboBox 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 //对齐方式,参见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 //值不存在时的提示信息 } 分区 2010-05 的第 131 页 属性 view : Ext.DataView 方法 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 : ( 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属性也方便了处理,建议有兴趣的同胞对 分区 2010-05 的第 132 页 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' }), 分区 2010-05 的第 133 页 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(" hello world "); htmleditor.syncValue(); EXT核心API详解Ext.menu.Menu(十六) Ext.menu.Menu 菜单对象 config{ allowOtherMenus : Boolean //允许同时显示其它的菜单? 分区 2010-05 的第 134 页 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位置插入item isVisible() : void 可见? remove( Ext.menu.Item item ) : void 移除item removeAll() : void 移除所有 show( Mixed element, [String position], [Ext.menu.Menu parentMenu] ) : void 相对于element显示当前菜单 showAt( Array xyPosition, [Ext.menu.Menu parentMenu] ) : void 在绝对位置xyposition显示当前菜单 分区 2010-05 的第 135 页 Ext.menu.BaseItem 所有菜单项的基类,继承自Component config { 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 ) : void setText( String text ) : void Ext.menu.CheckItem 继承自Item,前面带有选择框的菜单项 config{ checked : Boolean group : String 分区 2010-05 的第 136 页 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 }, { 分区 2010-05 的第 137 页 text: 'I donated!', checked:false, checkHandler: onItemCheck }, '-', { text: 'Radio Options', menu: { items: [ 'Choose a Theme', { 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 分区 2010-05 的第 138 页 // 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 相当于addButton 2:HtmlElement 相当于addElement 3:Field 相当于addField 4:Item 相当于addItem 5:String 相当于addText 6:'separator'或'-' 相当于addSeparator 分区 2010-05 的第 139 页 7:'' 相当于addSpacer 8:'->' 相当于addFill addButton( 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() : void enable() : void 可用/禁用 focus() : void 得到焦点 getEl() : HTMLElement 得到当前DOM对象 setVisible( Boolean visible ) : void show() : void hide() : void 显示隐藏 Ext.Toolbar.Separator 分区 2010-05 的第 140 页 继承自item,工具栏分隔符 Ext.Toolbar.Spacer 继承自item,工具栏空白元素 Ext.Toolbar.TextItem 继承自item,工具栏文本元素 Ext.Toolbar.Fill 继承自Spacer,工具栏空白元素,撑满工具栏 简单的示例 var tb = new Ext.Toolbar(...{width:400}); //在add之前先render,必要,不然会报错//在add之前先render,必要 tb.render(Ext.getBody()); tb.addText('请选择时间'); tb.add( new Ext.form.DateField(...{ //DateField fieldLabel:'DateField', format:'Y-m-d', disabledDays:[0,6] }) ); tb.addButton( new Ext.Toolbar.Button(...{ text:'button', handler:function(item)...{ Ext.MessageBox.alert("toolbar","您点击了"+item.text) } }) ); tb.addSpacer(); tb.addSeparator(); tb.addFill(); tb.add(new Ext.SplitButton(...{ handler: function(item)...{ Ext.MessageBox.alert("点击事件",String.format("您选择了 {0}",item.text)); }, arrowTooltip : "更多", text:'按我', menu:new Ext.menu.Menu(...{ id: 'mainMenu', items: [ ...{ text: '菜单项1' }, ...{ text: '菜单项2' }] }) }) ); EXT核心API详解Ext.data(十)-DataReader Ext.data.DataReader 分区 2010-05 的第 141 页 纯虚类,从数据源得到结构化数据转换为元数据对象,对象包含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得到 分区 2010-05 的第 142 页 id: "id" //id由json.id得到 },[ {name: 'name', mapping: 'name'}, {name: 'occupation'} //如果name与mapping同名,可以省略mapping ] ) var data=reader.readRecords(json); Ext.data.XmlReader 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", "", "", "2", "Ben", "Horticulturalist", "", ""].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 分区 2010-05 的第 143 页 Ext.data.Store store是一个为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 到store addSorted( 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和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 ) : Ext.data.Record getById( 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 ) : Number 分区 2010-05 的第 144 页 indexOfId( 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] ) : MixedCollection queryBy( 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' } ] //} 分区 2010-05 的第 145 页 //定义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文件内容为 2 1 Bill Gardener 2 Ben Horticulturalist 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} ]); 分区 2010-05 的第 146 页 var store=new Ext.data.Store(...{ reader:reader }); store.loadData(arr); EXT核心API详解Ext.data(十二)-GroupingStore Ext.data.GroupingStore 继承自Ext.data.Store,为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 Ext.data.ArrayReader( {id: 0}, [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]); var store=new Ext.data.GroupingStore({ reader:reader, groupField:'name', groupOnSort:true, sortInfo:{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定 sortInfo信息 }); store.loadData(arr); //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({ 分区 2010-05 的第 147 页 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 ) 分区 2010-05 的第 148 页 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 : String id 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 ) : Number node在当前节点的子节点中的位置 insertBefore( Node node, Node refNode ) : Node 在参考节点refNode之前插入node节点 isAncestor( Node node ) : Boolean 当前节点是node的祖先节点? isFirst() : Boolean isLast() : Boolean 当前节点是父节点的第一/最后一个节点 分区 2010-05 的第 149 页 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 Ext.Action action实现一个脱离了容 器的事件,所有它可以在多个容器之间共享,不过好象只有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() : void enable() : void setDisabled( Boolean disabled ) : void 禁止/允许 each( Function fn, Object scope ) : void 为每个实现了此action的componet应用fn 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){ 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 分区 2010-05 的第 150 页 简单的按钮类 公有属性: 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,//是否需要重复定义鼠标按下事件,也可以是一个 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 //切换按下状态 分区 2010-05 的第 151 页 示例: Untitled Page /*--加入样式背景好直观一点*/ .x-btn-pressed button{ background-color:red; } 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 }); }); 分区 2010-05 的第 152 页 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, //前导text showText : Boolean, //追加item的text到按钮显示 } getActiveItem() : Ext.menu.CheckItem setActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent ) : void 得到/设置活动选项 toggleSelected() : void 切换选择项,相当于点击一次按钮 示例 new Ext.CycleButton({ renderTo:Ext.getBody(), showText: true, prependText: 'View as ', items: [{ text:'text only', 分区 2010-05 的第 153 页 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或者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呼叫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 分区 2010-05 的第 154 页 得到当前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 ) 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 } 分区 2010-05 的第 155 页 构造很麻烦的,但还好我们一般不会直接使用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 : ( 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() : Boolean initComponent() : void setValue( 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 : Boolean enableColors : Boolean enableFont : Boolean enableFontSize : Boolean enableFormat : Boolean enableLinks : Boolean enableLists : Boolean enableSourceEdit : Boolean fontFamilies : Array //这个当然要用汉字的字体组成的数组了 } 方法 cleanHtml( String html ) : void 分区 2010-05 的第 156 页 createToolbar( HtmlEditor editor ) : void execCmd( String cmd, [String/Boolean value] ) : void getDocMarkup() : void getToolbar() : Ext.Toolbar insertAtCursor( String text ) : void pushValue() : void relayCmd( String cmd, [String/Boolean value] ) : void syncValue() : void toggleSourceEdit( [Boolean sourceEdit] ) : void updateToolbar() : void 要提一点的是,要使用HtmlEditor,别忘了先Ext.QuickTips.init(); Ext.form.TextField 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 //Ext.form.VTypes 中定义的vtype类型名,支持简单的类型验证 vtypeText : String//如果不是,则提示 } 方法: TextField( Object config ) 构造 autoSize() : void 自动尺寸 reset() : void 重置 selectText( [Number start], [Number end] ) : void 选择文本 validateValue( Mixed value ) : Boolean 验证值 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 分区 2010-05 的第 157 页 maxText : String maxValue : Number //默认Number.MAX_VALUE minText : String minValue : Number //默认Number.NEGATIVE_INFINITY nanText : String //NaN时显示? } Ext.form.TextArea config{ 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旁边加了个下拉按钮,要自己实现onTriggerClick config{ autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"} hideTrigger : Boolean //隐藏trigger,就是右边的那个下拉选择框 triggerClass : String } 事件 onTriggerClick( EventObject e ) : void Ext.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() : Date setValue( String/Date date ) : void 分区 2010-05 的第 158 页 Ext.form.ComboBox 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 //对齐方式,参见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() : void expand() : void 收起/展开下拉列表 doQuery( String query, Boolean forceAll ) : void 执行查询 分区 2010-05 的第 159 页 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 : ( 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 分区 2010-05 的第 160 页 }); 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 分区 2010-05 的第 161 页 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(" hello world "); 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对象 分区 2010-05 的第 162 页 * 一个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位置插入item isVisible() : void 可见? remove( Ext.menu.Item item ) : void 移除item removeAll() : void 移除所有 show( Mixed element, [String position], [Ext.menu.Menu parentMenu] ) : void 相对于element显示当前菜单 showAt( Array xyPosition, [Ext.menu.Menu parentMenu] ) : void 在绝对位置xyposition显示当前菜单 Ext.menu.BaseItem 所有菜单项的基类,继承自Component config { 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 分区 2010-05 的第 163 页 设置处理句柄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 ) : void setText( String text ) : void Ext.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 ) 分区 2010-05 的第 164 页 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: [ 'Choose a Theme', { text: 'Aero Glass', checked: true, group: 'theme', checkHandler: onItemCheck }, { text: 'Vista Black', checked: false, group: 'theme', checkHandler: onItemCheck 分区 2010-05 的第 165 页 }, { 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} ] } }); 分区 2010-05 的第 166 页 // 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 相当于addButton 2:HtmlElement 相当于addElement 3:Field 相当于addField 4:Item 相当于addItem 5:String 相当于addText 6:'separator'或'-' 相当于addSeparator 7:'' 相当于addSpacer 8:'->' 相当于addFill addButton( 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 分区 2010-05 的第 167 页 添加一个撑满工具条的空白元素 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() : void enable() : void 可用/禁用 focus() : void 得到焦点 getEl() : HTMLElement 得到当前DOM对象 setVisible( Boolean visible ) : void show() : void hide() : void 显示隐藏 Ext.Toolbar.Separator 继承自item,工具栏分隔符 Ext.Toolbar.Spacer 继承自item,工具栏空白元素 Ext.Toolbar.TextItem 继承自item,工具栏文本元素 Ext.Toolbar.Fill 继承自Spacer,工具栏空白元素,撑满工具栏 简单的示例 var tb = new Ext.Toolbar(...{width:400}); //在add之前先render,必要,不然会报错//在add之前先render,必要 tb.render(Ext.getBody()); 分区 2010-05 的第 168 页 tb.addText('请选择时间'); tb.add( new Ext.form.DateField(...{ //DateField fieldLabel:'DateField', format:'Y-m-d', disabledDays:[0,6] }) ); tb.addButton( new Ext.Toolbar.Button(...{ text:'button', handler:function(item)...{ Ext.MessageBox.alert("toolbar","您点击了"+item.text) } }) ); tb.addSpacer(); tb.addSeparator(); tb.addFill(); tb.add(new Ext.SplitButton(...{ handler: function(item)...{ Ext.MessageBox.alert("点击事件",String.format("您选择了 {0}",item.text)); }, arrowTooltip : "更多", text:'按我', menu:new Ext.menu.Menu(...{ id: 'mainMenu', items: [ ...{ text: '菜单项1' }, ...{ text: '菜单项2' }] }) }) ); EXT核心API详解Ext.widgets(十八)-grid 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 //可以使用这个构造参数格式化数据 分区 2010-05 的第 169 页 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 得到列id getColumnTooltip( 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 分区 2010-05 的第 170 页 可重写义大小 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 重设config setDataIndex( 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 分区 2010-05 的第 171 页 得到指定行列的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([ 分区 2010-05 的第 172 页 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) 作者:Daniel 日期:2008-05-27 字体大小: 小中大 Ext.grid.EditorGridPanel 可编辑数据表格 Config { clicksToEdit : Number //点几次开始编辑,默认为2 } 分区 2010-05 的第 173 页 方法 EditorGridPanel() 构造,应为 EditorGridPanel(Object config) startEditing( Number rowIndex, Number colIndex ) : void stopEditing() : 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]); } 分区 2010-05 的第 174 页 }, renderer : function(v, p, record)...{ p.css += ' x-grid3-check-col-td'; return ' '; } } //绑定到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; 分区 2010-05 的第 175 页 if(val>0)...{ bgcolor='#FF0000'; }else if(val<0)...{ bgcolor='#00FF00'; } else...{ bgcolor='#000000'; } return( ['',val,''].join('')); } Ext.grid.PropertyGrid 属性表格.继承自EditorGridPanel,用习惯ide的用户都会喜欢这个简单的属性表格, config{ customEditors : Object //自定义属性编辑器 source : Object //数据源 } 方法 PropertyGrid( Object config ) 构造 getSource() : Object setSource( 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(); 分区 2010-05 的第 176 页 选择模式都很容易使用,略过,至于其它的扩展,有时间再慢慢研究了,第一步先以学会使用为主 分区 2010-05 的第 177 页 有问题多调试时下断点,一步一步来,不要粗心大意。 在ext绑定数据中,要记住js中是否绑定完毕,有些数据时集合的,所以要加上XXXX.data,范过这种错误多次,但还是一次一次的犯错,所以这些常见性的错误要记住。特别是ext的数 据绑定问题。 Sql 存储过程 找错 1.倒推法。(从最里面的sql语句,逐步往外延伸,从中找到错误)(暂时觉得这种方法的可行性还行)                           问题集 2010年5月21日 9:52 分区 2010-05 的第 178 页

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享文档获得金币 ] 23 人已下载

下载文档

相关文档