码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!