EXT核心API详解(8-10).doc_咨信网zixin.com.cn

资源描述

EXT核心API详解 EXT核心API详解Ext.data(八)- Connection/Ajax/Record javascript 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' }); //所有的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 EXT核心API详解Ext.data(九)-DataProxy/HttpProxy/MemoryProxy/ 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}, [ {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 放弃 load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader Ext.data.DataReader 纯虚类,从数据源得到结构化数据转换为元数据对象,对象包含Record的集合,一般用做Store对象的元数据, 具有如下格式 { totalRecord:int, records:Array of Ext.data.Record } 具体使用参见三个子类 Ext.data.ArrayReader/Ext.data.JsonReader/Ext.data.XmlReader 方法 DataReader( Object meta, Object recordType ) 构造 Ext.data.ArrayReader 用于读数组到一个元数据对象 ArrayReader( Object meta, Object recordType ) 构造,第一个参数是配置除了可以指示使用哪个字段做id外,不懂其它的用法, 第二个参数是recordType与record对象的create方法的参数一样,是一样config对象数组,具体参见 readRecords( Object o ) : Object 读取o,返回一个元数据对象用例示范: //定义数组 var arr=[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]; var reader = new Ext.data.ArrayReader( //以第一个元素做为recordid {id: 0}, //定义数组到record的映射关系 [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ] ); //生成元数据 var data=reader.readRecords(arr); Ext.data.JsonReader 用于将一个json对象转换为元数据对象 JsonReader( Object meta, Object recordType ) JsonReader的构造参数meta可以有更多选择, { id : String, root : String, successProperty : String, totalProperty : String } 都是对应json对象的属性名 read( Object response ) : Object 从一个response对象返回,response.responseText属性应仅含有一个json格式数据块 readRecords( Object o ) : Object 读取o,返回一个元数据对象使用示例: var json={ 'results': 2, 'rows': [ { 'id': 1, 'name': 'Bill', occupation: 'Gardener' }, { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ] }; var reader=new Ext.data.JsonReader( { totalProperty: "results",//totalRecords属性由json.results得到 root: "rows", //构造元数据的数组由json.rows得到 id: "id" //id由json.id得到 },[ {name: 'name', mapping: 'name'}, {name: 'occupation'} //如果name与mapping同名,可以省略mapping ] ) var data=reader.readRecords(json); Ext.data.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=["<?xml version=\"1.0\" encoding=\"utf-8\" ?>", "<dataset>", "<results>2</results>", "<row>", "<id>1</id>", "<name>Bill</name>", "<occupation>Gardener</occupation>", "</row>", "<row>", "<id>2</id>", "<name>Ben</name>", "<occupation>Horticulturalist</occupation>", "</row>", "</dataset>"].join(""); //生成xmldocument对象 var xmlDocument; if(Ext.isIE){ xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument") xmlDocument.async=false; xmlDocument.resolveExternals = false; xmlDocument.loadXML(str) } else{ xmlDocument = (new DOMParser()).parseFromString(str, "text/xml"); } //然后开始...和其它两个reader一样的用法,只是这儿换了一种写法,recordtype也可以是一个record对象 var record = Ext.data.Record.create([ {name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name" {name: 'occupation'} // This field will use "occupation" as the mapping. ]) var reader = new Ext.data.XmlReader({ totalRecords: "results", record: "row", //row是节点选择器 id: "id" }, record); var data=reader.readRecords(xmlDocument);

展开阅读全文