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的读取器

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. })();

2.     Array读取器

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格式的读取器

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文件:

1. <users>
2. <user>
3. <name>uspcat.com</name>
4. <id>00101</id>
5. </user>
6. </users>

4.     writer的Json和xml

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