Extjs 数据读取对象ArrayReader/JsonReader/XmlReader

<! 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 >