码迷，mamicode.com
首页 > Web开发 > 详细

ExtJs的Reader

时间：2018-04-12 15:34:02      阅读：252      评论：0      收藏：0      [点我收藏+]

标签：url   copy   post   写入   write   tail   ons   tar   好的   

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

标签：url   copy   post   写入   write   tail   ons   tar   好的   

原文地址：https://www.cnblogs.com/1175429393wljblog/p/8807551.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！