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

最新推荐文章于 2022-04-25 09:26:56 发布

PHENIXCXG

最新推荐文章于 2022-04-25 09:26:56 发布

阅读量151

点赞数

分类专栏： ExtJS 文章标签： EXT XHTML XML HTML

ExtJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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