<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>無標題頁</title> <script src="ExtJs/ext-base.js" type="text/javascript"></script> <script src="ExtJs/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- //數據源爲數組的ArrayReader function ArrayData()
{ 
//定義數組 var arr=[ [ 'Bill', 'Gardener',1],['Ben', 'Horticulturalist',2]]; var reader = new Ext.data.ArrayReader( //以第一個元素做爲recordid,這個是必須得要的 {id: 2}, //定義數組到record的映射關係 //name:屬性名稱 //mapping:映射到數據源的序列，即索引 [ {name: 'name', mapping: 0},//對應字符:Bill {name: 'metier', mapping: 1},//對應字符:Gardener {name: 'id',mapping:2}//對應數字:1,如果第一個元素定義，則可以省略 ] ); //生成元數據 var data=reader.readRecords(arr); var str=""; for(var i=0;i<data.records.length;i++) { //標識列 保存的數組被轉換爲對象 Json數據 str = str.concat( " totalRecords:"+data.totalRecords +//數據總條數 " ID:"+data.records[i].id + " Data: .id="+data.records[i].data.id + " Data: .name="+data.records[i].data.name + " Data: .metier="+data.records[i].data.metier + " json:"+data.records[i].json+" ");
} alert(str); } function JsonData() { var json={ 'results': 2, //設定此對象的總個數,與rows數組長度一致，需要手動設定 'rows': [ { id: 1, name: 'Bill', metier: 'Gardener' }, { id: 2, name: 'Ben', metier: 'Horticulturalist' } ] }; var reader=new Ext.data.JsonReader( { totalProperty: "results",//totalRecords屬性由json.results得到(省略此參數也能得到總條數) root: "rows", //構造元數據的數組由json.rows得到 id: "id" //id由json.id得到 },[ {name:'id',mapping:'id'}, {name: 'name', mapping: 'name'}, {name: 'metier'} //如果name與mapping同名,可以省略mapping ] ) var data=reader.readRecords(json); var str=""; for(var i=0;i<data.records.length;i++) { //標識列 保存的數組被轉換爲對象 Json數據 str = str.concat( " totalRecords:"+data.totalRecords +//數據總條數 " ID:"+data.records[i].id + " Data: .id="+data.records[i].data.id + " Data: .name="+data.records[i].data.name + " Data: .metier="+data.records[i].data.metier + " json:"+data.records[i].json+" "); } alert(str); } function XmlData() { 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對象 //record對象的屬性映射 var record = Ext.data.Record.create([ {name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name" {name: 'metier',mapping:'occupation'}, // This field will use "occupation" as the mapping. {name:'id'} ]) var reader = new Ext.data.XmlReader({ totalRecords: "results", record: "row", //row是節點選擇器 id: "id" }, record); var data=reader.readRecords(xmlDocument); var outstr=""; for(var i=0;i<data.records.length;i++) { //標識列 保存的數組被轉換爲對象 Json數據 outstr = outstr.concat( " totalRecords:"+data.totalRecords +//數據總條數 " ID:"+data.records[i].id + " Data: .id="+data.records[i].data.id + " Data: .name="+data.records[i].data.name + " Data: .metier="+data.records[i].data.metier + " json:"+data.records[i].json+" "); } alert(outstr); } //-->
</script></head><body> <input id="Button1" onclick="ArrayData()" type="button" value="數組源數據" /> <input id="Button2" onclick="JsonData()" type="button" value="Json源數據" /> <input id="Button3" onclick="XmlData()" type="button" value="XML源數據" /></body></html>