`
starbhhc
  • 浏览: 633932 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

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

EXTXHTMLXMLHTML 
阅读更多
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2.<html xmlns="http://www.w3.org/1999/xhtml">  
3.<head>  
4.    <title>无标题页</title>  
5. 
6.    <script src="ExtJs/ext-base.js" type="text/javascript"></script>  
7. 
8.    <script src="ExtJs/ext-all.js" type="text/javascript"></script>  
9. 
10.    <script type="text/javascript">...  
11.    <!--      
12.      
13.     //数据源为数组的ArrayReader  
14.     function ArrayData()  
15.     ...{        
16.        //定义数组  
17.        var arr=[ [ 'Bill', 'Gardener',1],['Ben', 'Horticulturalist',2]];  
18.        var reader = new Ext.data.ArrayReader(  
19.        //以第一个元素做为recordid,这个是必须得要的  
20.            ...{id: 2},   
21.        //定义数组到record的映射关系  
22.        //name:属性名称  
23.        //mapping:映射到数据源的序列，即索引  
24.           [              
25.            ...{name: 'name', mapping: 0},//对应字符:Bill  
26.            ...{name: 'metier', mapping: 1},//对应字符:Gardener  
27.            ...{name: 'id',mapping:2}//对应数字:1,如果第一个元素定义，则可以省略  
28.           ]  
29.        );                  
30.        //生成元数据  
31.        var data=reader.readRecords(arr);  
32.        var str="";  
33.        for(var i=0;i<data.records.length;i++)  
34.        ...{                
35.                    //标识列                        保存的数组被转换为对象                              Json数据          
36.            str = str.concat(  
37.                             " totalRecords:"+data.totalRecords +//数据总条数  
38.                             " ID:"+data.records[i].id +  
39.                             " Data: .id="+data.records[i].data.id +     
40.                             " Data: .name="+data.records[i].data.name +     
41.                             " Data: .metier="+data.records[i].data.metier +   
42.                             " json:"+data.records[i].json+" ");  
43.        }  
44.        alert(str);             
45.    }  
46.      
47.      
48.    function JsonData()  
49.    ...{  
50.        var json=...{ 'results': 2, //设定此对象的总个数,与rows数组长度一致，需要手动设定  
51.                    'rows': [  
52.                        ...{ id: 1, name: 'Bill', metier: 'Gardener' },  
53.                        ...{ id: 2, name: 'Ben', metier: 'Horticulturalist' }   
54.                            ]  
55.                 };  
56.        var reader=new Ext.data.JsonReader(  
57.            ...{  
58.            totalProperty: "results",//totalRecords属性由json.results得到(省略此参数也能得到总条数)  
59.            root: "rows",            //构造元数据的数组由json.rows得到  
60.            id: "id"                //id由json.id得到  
61.            },[  
62.            ...{name:'id',mapping:'id'},  
63.            ...{name: 'name', mapping: 'name'},   
64.            ...{name: 'metier'}            //如果name与mapping同名,可以省略mapping  
65.            ]  
66.        )  
67.        var data=reader.readRecords(json);         
68.        var str="";          
69.        for(var i=0;i<data.records.length;i++)  
70.        ...{                
71.                    //标识列                        保存的数组被转换为对象                              Json数据          
72.            str = str.concat(  
73.                             " totalRecords:"+data.totalRecords +//数据总条数  
74.                             " ID:"+data.records[i].id +  
75.                             " Data: .id="+data.records[i].data.id +     
76.                             " Data: .name="+data.records[i].data.name +     
77.                             " Data: .metier="+data.records[i].data.metier +   
78.                             " json:"+data.records[i].json+" ");  
79.        }  
80.        alert(str);   
81.    }  
82.      
83.    function XmlData()  
84.    ...{  
85.        var str=["<?xml version="1.0" encoding="utf-8" ?>",  
86.            "<dataset>",  
87.         "<results>2</results>",  
88.         "<row>",  
89.           "<id>1</id>",  
90.           "<name>Bill</name>",  
91.           "<occupation>Gardener</occupation>",  
92.         "</row>",  
93.         "<row>",  
94.           "<id>2</id>",  
95.           "<name>Ben</name>",  
96.           "<occupation>Horticulturalist</occupation>",  
97.         "</row>",  
98.        "</dataset>"].join("");  
99. 
100.        //生成xmldocument对象  
101.        var xmlDocument;  
102.         if(Ext.isIE)...{  
103.            xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument")  
104.            xmlDocument.async=false;  
105.            xmlDocument.resolveExternals = false;  
106.            xmlDocument.loadXML(str)   
107.        }  
108.        else...{  
109.           xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");  
110.        }  
111. 
112.        //然后开始...和其它两个reader一样的用法,只是这儿换了一种写法,recordtype也可以是一个record对象  
113.        //record对象的属性映射  
114.        var record = Ext.data.Record.create([  
115.           ...{name: 'name', mapping: 'name'},     // "mapping" property not needed if it's the same as "name"  
116.           ...{name: 'metier',mapping:'occupation'},                // This field will use "occupation" as the mapping.  
117.           ...{name:'id'}  
118.        ])  
119.          
120.          
121.        var reader = new Ext.data.XmlReader(...{  
122.           totalRecords: "results",   
123.           record: "row",           //row是节点选择器  
124.           id: "id"                   
125.        }, record);  
126.        var data=reader.readRecords(xmlDocument);  
127.          
128.        var outstr="";          
129.        for(var i=0;i<data.records.length;i++)  
130.        ...{                
131.                    //标识列                        保存的数组被转换为对象                              Json数据          
132.            outstr = outstr.concat(  
133.                             " totalRecords:"+data.totalRecords +//数据总条数  
134.                             " ID:"+data.records[i].id +  
135.                             " Data: .id="+data.records[i].data.id +     
136.                             " Data: .name="+data.records[i].data.name +     
137.                             " Data: .metier="+data.records[i].data.metier +   
138.                             " json:"+data.records[i].json+" ");  
139.        }  
140.        alert(outstr);   
141.          
142.    }      
143.    //-->  
144.    </script>  
145. 
146.</head>  
147.<body>  
148.    <input id="Button1" onclick="ArrayData()" type="button" value="数组源数据" />  
149.    <input id="Button2" onclick="JsonData()" type="button" value="Json源数据" />  
150.    <input id="Button3" onclick="XmlData()" type="button" value="XML源数据" />  
151.</body>  
152.</html>
分享到：
| 不错的JS中Cookie的文章
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics