ExtJs的Reader

Posted 2020-10-30 LongtengGensSupreme

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