Ext2.2 ArrayReader/JsonReader/XmlRead

最新推荐文章于 2025-05-03 14:11:37 发布

原创最新推荐文章于 2025-05-03 14:11:37 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #json #JavaScript #CSS #XML #ViewUI

本文介绍ExtJS中三种不同类型的数据读取器(ArrayReader, JsonReader, XmlReader)的使用方法。通过具体示例展示了如何从不同格式的数据源（数组、JSON对象及XML文档）中读取数据，并将其转换为ExtJS可操作的数据记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明: 代码来源网络, 原代码某些地方在Ext2.2中有错.

ArrayReader, 注意new Ext.data.ArrayReader({}, ... );

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>


  <script type="text/javascript">
 
    
     //数据源为数组的ArrayReader
     function ArrayData()
     {      

 var arr=[ [ 'Bill', 'Gardener',1],['Ben', 'Horticulturalist',2]];
        var reader = new Ext.data.ArrayReader({},
           [            
             {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++)
         {              
        
            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);             
    }

    </script>

</head>
<body>
 <input id="Button1" onclick="ArrayData()" type="button" value="数组源数据" />

</body>
</html>

JsonReader

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>


  <script type="text/javascript">
 
     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); 
    }

    </script>

</head>
<body>
 <input id="Button1" onclick="JsonData()" type="button" value="Json源数据" />

</body>
</html>

XmlReader

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>


  <script type="text/javascript">
 
    
    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="XmlData()" type="button" value="Xml源数据" />

</body>
</html>