ExtJs的Reader

我会带着你远行 2023-06-11 08:25 11阅读 0赞

# 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][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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提交的:

![1352296902_7368.png][]

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

![1352296911_3754.png][]

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

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[view plain]: https://blog.csdn.net/hanhan313/article/details/8159774#
[1352296902_7368.png]: https://img-my.csdn.net/uploads/201211/07/1352296902_7368.png
[1352296911_3754.png]: https://img-my.csdn.net/uploads/201211/07/1352296911_3754.png