ExtJs的Reader

Posted LongtengGensSupreme

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ExtJs的Reader相关的知识,希望对你有一定的参考价值。

ExtJs的Reader

Reader : 主要用于将proxy数据代理读取的数据按照不同的规则进行解析,讲解析好的数据保存到Modle中

结构图

    Ext.data.reader.Reader 读取器的根类

       Ext.data.reader.Json JSON格式的读取器

           Ext.data.reader.Array 扩展JSON的Array读取器

       Ext.data.reader.Xml XML格式的读取器

Writer

结构图

    Ext.data.writer.Writer

       Ext.data.writer.Json 对象被解释成JSON的形式传到后台

       Ext.data.writer.Xml  对象被解释成XML的形式传到后台

1.     Json的读取器

 

[javascript] view plain copy
 
  1. (function(){  
  2.     Ext.onReady(function(){  
  3.         var userData = {  
  4.             //total : 200,  
  5.             count:250,  
  6.             user:{  
  7.                 userID:‘1‘,  
  8.                 name:‘uspcat.com‘,  
  9.                 orders:[  
  10.                     {id:‘001‘,name:‘pen‘},  
  11.                     {id:‘002‘,name:‘book‘}  
  12.                 ]  
  13.             }  
  14.         };  
  15.         //定义model  
  16.         Ext.regModel("user",{  
  17.             fields:[  
  18.                 {name:‘userID‘,type:‘string‘},  
  19.                 {name:‘name‘,type:‘string‘}  
  20.             ],  
  21.             hasMany: {model: ‘order‘}    //定义有多个order的属性  
  22.         });  
  23.         Ext.regModel("order",{  
  24.             fields:[  
  25.                 {name:‘id‘,type:‘string‘},  
  26.                 {name:‘name‘,type:‘string‘}  
  27.             ],  
  28.             belongsTo: {type: ‘belongsTo‘, model: ‘user‘}  //定义属于  
  29.         });  
  30.         var mproxy = Ext.create("Ext.data.proxy.Memory",{  
  31.             model:‘user‘,  
  32.             data:userData,  
  33.             reader:{  
  34.                 type:‘json‘,  
  35.                 root:‘user‘,  
  36.                 implicitIncludes:true,    //级联读取  
  37.                 totalProperty:‘count‘       
  38.                 //record :‘info‘//服务器返回的数据可能很复杂,用record可以删选出有用的数据信息,装在带Model中  
  39.             }  
  40.         });  
  41.         mproxy.read(new Ext.data.Operation(),function(result){  
  42.             var datas = result.resultSet.records;  
  43.             alert(result.resultSet.total);    //打印count  
  44.             Ext.Array.each(datas,function(model){  
  45.                 alert(model.get(‘name‘));  
  46.             });  
  47.             var user = result.resultSet.records[0];   //获取第一个用用数据  
  48.             var orders = user.orders();    //获取到用户中的orders集合  
  49.             orders.each(function(order){   //遍历orders集合  
  50.                 alert(order.get(‘name‘));  
  51.             });  
  52.              
  53.         });  
  54.     });  
  55. })();  

2.     Array读取器

 

[javascript] view plain copy
 
  1.  Ext.onReady(function(){  
  2.     Ext.regModel("person",{  
  3.        fields:[  
  4.            ‘name‘,‘age‘  
  5. //         {name:‘name‘},  
  6. //         {name:‘age‘}  
  7.        ],  
  8.        proxy :{  
  9.            type:‘ajax‘,  
  10.            url:‘person.jsp‘,  
  11.            reader:{  
  12.               type:‘array‘  
  13.            }  
  14.        }  
  15.     });  
  16.        var person =Ext.ModelManager.getModel(‘person‘);  
  17.        person.load(1,{  
  18.            success:function(model){  
  19.               alert(model.get(‘name‘));  
  20.            }  
  21.        });  
  22. });  

Person.jsp文件:

 <%

    response.getWriter().write("[[‘yunfengcheng‘,26]]");

%>

3. XML格式的读取器

 

[javascript] view plain copy
 
  1. (function(){  
  2.     Ext.onReady(function(){  
  3.        Ext.regModel("user",{  
  4.            fields:[  
  5.               {name:‘name‘},  
  6.               {name:‘id‘}  
  7.            ],  
  8.            proxy:{  
  9.               type:‘ajax‘,  
  10.               url:‘users.xml‘,  
  11.               reader:{  
  12.                   type:‘xml‘,  
  13.                   record:‘user‘  
  14.               }  
  15.            }  
  16.        });  
  17.        var user = Ext.ModelManager.getModel(‘user‘);  
  18.        user.load(1,{  
  19.            success:function(model){  
  20.               alert(model);  
  21.               alert(model.get(‘id‘));  
  22.            }  
  23.        });  
  24.     });  
  25. })();  

Users.xml文件:

 

[html] view plain copy
 
  1. <users>  
  2.     <user>  
  3.        <name>uspcat.com</name>  
  4.        <id>00101</id>  
  5.     </user>  
  6. </users>  

4.     writer的Json和xml

 

[javascript] view plain copy
 
  1. Ext.onReady(function(){  
  2.     Ext.regModel("person",{  
  3.        fields:[  
  4.            ‘name‘,‘age‘  
  5.        ],  
  6.        proxy :{  
  7.            type:‘ajax‘,  
  8.            url:‘person.jsp‘,  
  9.            writer:{  
  10.               type:‘json‘  //使用Json提交数据  
  11.               //type:‘xml‘ //使用xml提交数据  
  12.            }  
  13.        }  
  14.     });  
  15.     Ext.ModelMgr.create({  
  16.        name:‘uspcat.con‘,  
  17.        age:1  
  18.     },‘person‘).save();   
  19. });  

使用Json写入的时候,浏览器查看提交信息是如下图,是以json提交的:

技术分享图片

使用xml写入的时候,浏览器查看提交信息是如下图,是以xml提交的:

技术分享图片

 

原文链接:https://blog.csdn.net/hanhan313/article/details/8159774

以上是关于ExtJs的Reader的主要内容,如果未能解决你的问题,请参考以下文章

mybatis之SqlSessionFactory源码分析

Java之字符流读写文件文件的拷贝

javase(Properties集合及学生对象信息录入文本中案例)

Extjs 3 到 Extjs 4 [关闭]

ExtJS:以 ExtJS 样式获取当前 URL

ExtJs3 中的 Extjs4 this.callParent