`
jysboy
  • 浏览: 10411 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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

阅读更多
  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>  
分享到:
评论

相关推荐

    extjs desktop实例(个人/家庭收支系统)第2部分

    extjs desktop实例(个人/家庭收支系统)第2部分

    ExtJs java实例 (个人/家庭收支管理系统)第2版加强版

    增加了部分统计和分析导出数据功能 针对有些朋友不知道怎么运行: 你只有把数据库建好连接好 就运行 indeEXT.jsp 就可以进行一步一步进行浏览 可以进行查看逻辑

    extjs desktop实例(个人/家庭收支系统)第1部分

    extjsdesktop +java 实例 完整

    深入浅出Extjs PDF书籍(3/3)

    OK...完事了。。感谢大家对小弟的信任。。有啥好的书名可以评论给我。。到时候我找给你

    ExtJs java实例 (个人/家庭收支管理系统)

    请下: (个人/家庭收支管理系统)第2版 ... 月收入数据分析 月支出数据分析 年支出分析 年收入分析 增删查改 统计总收入与支出 按时间查询 等功能 还有个user表 有ID USERNAME PASSWORD 3个字段

    深入浅出Extjs PDF书籍(1/3)

    总共3个文件。。绝对物有所值。。15分能下载到一本超值的书。。关注我其他上传。。共3个。。绝对辛苦分

    ext-2.2.zip

    在CDH使用oozie 的时候需要安装ext-...我用之前的ext版本 当只有一页数据时,页码导航不会灰色,换成ext2.2就正常了。页码导航条中的刷新按钮也有小变化。 另外界面美化了很多。Ext.form.ComboBox 的样式就很漂亮!

    ExtJs分页

    Extjs+springmvc登录注册,分页,sqlserver08

    ExtJs + api + 笔记 + 完整包

    ExtJs + api + 笔记 + 完整包

    extjs读取解析后端json格式数据显示条形图

    extjs读取解析后端json格式数据并显示条形图,非常好看的特效,只能用炫酷来形容,感兴趣就下载看看吧,用在自己的网站觉得吸引眼球!

    深入浅出Extjs PDF书籍(2/3)

    总共3个文件。这是第二个。绝对物有所值。。15分能下载到一本超值的书。。关注我其他上传。。共3个。。绝对辛苦分

    Extjs-ext-3.1.1

    licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    Extjs3.2可视化编辑器

    ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得...要使用ExtJS,那么首先要得到ExtJS库文件,该框架是一个开源的,可以直接从官方网站下载,网址:http://extjs.com/products/extjs/download.php

    ManagedIframe

    对ExtJS的TabPanel加载带js的iframe页提供支持 extjs load once提供支持 extjs 面板间消息传递提供支持。。 &lt;br&gt;资源整理自extjs论坛,修正了里面的链接和异常,直接部署到extjs2.1的example底下就可以 ...

    extjs中文解决方案/Eclipse下的js和ext开发

    extjs中文解决方案/Eclipse下的js和ext开发 内容: 1. &lt;script type="text/javascript" src="&lt;%=contextPath%&gt;/public/js/ext-base.js"&gt;&lt;/script&gt; 2. &lt;script type="text/javascript" src="&lt;%=contextPath%&gt;/public...

    extjs-json-数据转换

    使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...

    extjs数据存储与传输详解

    extjs数据存储与传输详解,为了方便大家学习ExtJs技术,特总结了ExtJs最常用的Store部分内容,供大家参考...

    EXTJS 3.04包/中文版API/入门学习资料

    EXTJS 3.04包/中文版API/入门学习资料

    ExtJS入门教程

    1、开始使用extjs 2、组件的介绍以及应用 3、ExtJS的核心 该教程有相应的代码以供参考 &lt;!--导入Ext3.2--&gt; &lt;link rel="stylesheet" type="text/css" href="extjs3.2/resources/css/ext-all.css" /&gt; ...

Global site tag (gtag.js) - Google Analytics