The JSON Reader is used by a Proxy to read a server response that is sent back in JSON format. This usually happens as a result of loading a Store - for example we might create something like this:(JSON Reader被Proxy用来读取服务器回应的JSON格式的数据。这经常在加载Store的发生。例如我们创建一个像下面的东西：)

  1. Ext.define('User', {
  2. extend: 'Ext.data.Model',
  3. fields: ['id', 'name', 'email']
  4. });
  5. var store = Ext.create('Ext.data.Store', {
  6. model: 'User',
  7. proxy: {
  8. type: 'ajax',
  9. url : 'users.json',
  10. reader: {
  11. type: 'json'
  12. }
  13. }
  14. });

The example above creates a 'User' model. Models are explained in the Model docs if you're not already familiar with them.（上面例子创建了一个‘User’模型，如果你不熟悉模型，可以产看Model的文档。）

We created the simplest type of JSON Reader possible by simply telling our Store's Proxy that we want a JSON Reader.(我们创建了一个简单类型的JSON Reader,我们只是简单告诉Store的Proxy我们想要一个JSON Reader。) The Store automatically passes the configured model to the Store, so it is as if we passed this instead:(Store自动传递模型的配置给Store，所以好像我们自己传递的一样。)

  1. reader: {
  2. type : 'json',
  3. model: 'User'
  4. }

The reader we set up is ready to read data from our server - at the moment it will accept a response like this:(我们建立的reader已经准备好从我们的服务器上读取数据，同时它将接受如下的服务器回应。)

  1. [
  2. {
  3. "id": 1,
  4. "name": "Ed Spencer",
  5. "email": "ed@sencha.com"
  6. },
  7. {
  8. "id": 2,
  9. "name": "Abe Elias",
  10. "email": "abe@sencha.com"
  11. }
  12. ]

Reading other JSON formats

If you already have your JSON format defined and it doesn't look quite like what we have above, you can usually pass JsonReader a couple of configuration options to make it parse your format. (如果你已经有了JSON格式的数据，但是它开起来不像我们上面的，你经常传递给JsonReader一组配置选项让它转换你的格式)For example, we can use the root configuration to parse data that comes back like this:(例如我们使用root配置来转换传回来的数据：)

  1. {
  2. "users": [
  3. {
  4. "id": 1,
  5. "name": "Ed Spencer",
  6. "email": "ed@sencha.com"
  7. },
  8. {
  9. "id": 2,
  10. "name": "Abe Elias",
  11. "email": "abe@sencha.com"
  12. }
  13. ]
  14. }

To parse this we just pass in a root configuration that matches the 'users' above:(为了转换上面的数据，我们传递root配置来匹配‘users’。)

  1. reader: {
  2. type: 'json',
  3. root: 'users'
  4. }

Sometimes the JSON structure is even more complicated. Document databases like CouchDB often provide metadata around each record inside a nested structure like this:(一些时候JSON结构是非常复杂的。文档数据库像CouchDB 经常提供元素，每个记录都内嵌在结构中，像下面：)

  1. {
  2. "total": 122,
  3. "offset": 0,
  4. "users": [
  5. {
  6. "id": "ed-spencer-1",
  7. "value": 1,
  8. "user": {
  9. "id": 1,
  10. "name": "Ed Spencer",
  11. "email": "ed@sencha.com"
  12. }
  13. }
  14. ]
  15. }

In the case above the record data is nested an additional level inside the "users" array as each "user" item has additional metadata surrounding it ('id' and 'value' in this case). （想上面的例子，记录数据是内嵌在users数据中，每个user项都有附加的元素围绕着它，比如‘id’和‘value’）To parse data out of each "user" item in the JSON above we need to specify the record configuration like this:（为了转换每个‘user’项我们需要像下面这样指定记录的配置。）

  1. reader: {
  2. type  : 'json',
  3. root  : 'users',
  4. record: 'user'
  5. }

下面是三个例子：

json.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>reader</title>
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
  8. <script type="text/javascript" src="json2.js"></script>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

------------------------------------------------------------------------------------

json.js

  1. (function(){
  2. Ext.onReady(function(){
  3. Ext.define('User', {
  4. extend: 'Ext.data.Model',
  5. fields: ['id', 'name', 'email']
  6. });
  7. var store = Ext.create('Ext.data.Store', {
  8. model: 'User',
  9. proxy: {
  10. type: 'ajax',
  11. url : 'json.jsp',
  12. reader: {
  13. type: 'json',
  14. model: 'User'
  15. }
  16. }
  17. });
  18. store.load({
  19. callback: function() {
  20. //the user that was loaded
  21. var user = store.first();
  22. console.log(user);
  23. console.log("Orders for " + user.get('name') + ":");
  24. }
  25. });
  26. });
  27. })();

json.jsp

  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
  2. <%
  3. response.getWriter().write("["
  4. +"{"
  5. +"\"id\": 1,"
  6. +"\"name\": \"Ed Spencer\","
  7. +"\"email\": \"ed@sencha.com\""
  8. +" },"
  9. +"{"
  10. +" \"id\": 2,"
  11. +"\"name\": \"Abe Elias\","
  12. +"\"email\": \"abe@sencha.com\""
  13. +"}"
  14. +"]");
  15. %>

---------------------------------------------------------------------------------

json2.js

  1. (function(){
  2. Ext.onReady(function(){
  3. Ext.define('User', {
  4. extend: 'Ext.data.Model',
  5. fields: ['id', 'name', 'email']
  6. });
  7. var store = Ext.create('Ext.data.Store', {
  8. model: 'User',
  9. proxy: {
  10. type: 'ajax',
  11. url : 'json2.jsp',
  12. reader: {
  13. type: 'json',
  14. model: 'User',
  15. root: 'users'
  16. }
  17. }
  18. });
  19. store.load({
  20. callback: function() {
  21. //the user that was loaded
  22. var user = store.first();
  23. console.log(user);
  24. console.log("Orders for " + user.get('name') + ":");
  25. }
  26. });
  27. });
  28. })();

json2.jsp

  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
  2. <%
  3. response.getWriter().write("{"
  4. +"\"users\": ["
  5. +"{"
  6. +" \"id\": 1,"
  7. +" \"name\": \"Ed Spencer\","
  8. +" \"email\": \"ed@sencha.com\""
  9. +" },"
  10. +" {"
  11. +"   \"id\": 2,"
  12. +"  \"name\": \"Abe Elias\","
  13. +"   \"email\": \"abe@sencha.com\""
  14. +" }"
  15. +" ]"
  16. +"}");
  17. %>

------------------------------------------------------------------------------------

json3.js

  1. (function(){
  2. Ext.onReady(function(){
  3. Ext.define('User', {
  4. extend: 'Ext.data.Model',
  5. fields: ['id', 'name', 'email']
  6. });
  7. var store = Ext.create('Ext.data.Store', {
  8. model: 'User',
  9. proxy: {
  10. type: 'ajax',
  11. url : 'json3.jsp',
  12. reader: {
  13. type: 'json',
  14. model: 'User',
  15. root  : 'users',
  16. record: 'user'
  17. }
  18. }
  19. });
  20. store.load({
  21. callback: function() {
  22. //the user that was loaded
  23. var user = store.first();
  24. console.log(user);
  25. console.log("Orders for " + user.get('name') + ":");
  26. }
  27. });
  28. });
  29. })();

json3.jsp

  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
  2. <%
  3. response.getWriter().write("{"
  4. +"\"total\": 122,"
  5. +"\"offset\": 0,"
  6. +"\"users\": ["
  7. +"{"
  8. +"\"id\": \"ed-spencer-1\","
  9. +"\"value\": 1,"
  10. +"\"user\": {"
  11. +"\"id\": 1,"
  12. +"\"name\": \"Ed Spencer\","
  13. +"\"email\": \"ed@sencha.com\""
  14. +"}"
  15. +"}"
  16. +"]"
  17. +"}");
  18. %>

1111111111111111

1111111111111

转载于:https://blog.51cto.com/gzzjsoft/1062818

Ext.data.reader.Json reader: json相关推荐

  1. Ext.data.Store 获取Json数据只有一行,而且是最后一行

    这个是js代码,获取的是json数据,使用了reader this.store=new Ext.data.Store({ idProperty: 'itemid', autoLoad:this.aut ...

  2. Ext.data.Connection

    Ext.data.Connection 2013年7月24日 14:54 Ext.data在命名空间中定义了一系列store.reader.proxy,Grid和ComboxBox都是Ext.data ...

  3. ExtJs6 理解 -- Ext.data.proxy.Proxy

    2019独角兽企业重金招聘Python工程师标准>>> 1. Ext.data.proxy.Proxy 分类 Proxy 分为 client 和 Server 两种 Client: ...

  4. ExtJs之Ext.data.Store

    因为上次用过Ext.data.Store,觉得挺重要的,  故转载了一篇http://blog.csdn.net/davidxj/archive/2009/04/23/4103647.aspx Ext ...

  5. extJS 中 ext.data 介绍

    ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据. Ext.data在命名空间中定义了一系列store.reader和pro ...

  6. [Extjs6]浅谈Ext.data.Store的使用.

    定义model Ext.define('Example.model.Contact', {extend: 'Ext.data.Model',fields: ['id', 'name', 'phone' ...

  7. NET流行高性能JSON框架-Json.NET

    在日常编程中经常会使用到Json来进行数据的交互好在.Net平台下有很多开源的Json库使得我们能够比较轻松快速的处理各种复杂的Json,其中Newtonsoft库 是NET的流行高性能JSON框架 ...

  8. Ext.data.GroupingStore

    Ext.data.GroupingStore 继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用GroupingStore时必须指定sort ...

  9. ext store 数据修改_extjs 之Ext.data.Store变更单行记录值【修改】

    1.record声明如下 machineuse_record = Ext.data.Record.create([{ name : 'id', type : 'int' }, { name : 'pr ...

最新文章

  1. 网站内容优化时需注意哪些事项？
  2. cnblogs第一篇
  3. Dex-net再次复现
  4. linux运维初级课前实战随机考试题含答案（笔试+上机）
  5. 分页存储过程2005
  6. matlab repmat_三行MATLAB实现动漫风格照片
  7. FishC笔记—15 讲 字符串：格式化
  8. 前端安全: 如何防止 XSS 攻击?
  9. 财智家庭理财V6.0（序列号完美破解版）
  10. LeetCode刷题-反转字符串中的元音字母
  11. Error: Unbalanced delimiter found in string
  12. php k线公式源码,K线动能（附图，贴图 ，源码）
  13. python html跨平台尝试Eel
  14. 传奇背词 商业经济类第一篇 消费者该怎么做？
  15. chrome插件安装
  16. 【J2EE实验-3】Spring MVC
  17. mac中删除相关快捷键
  18. NLP学院网：李斌NLP关键执行：由谁去给猫挂铃铛？
  19. 【工具篇】云原生架构，DevOps介绍
  20. android手机Down版本

热门文章

  1. Linux之wget下载
  2. MySQL学习随笔记录
  3. Hibernate一对多（注解）
  4. MySQL中DATE_FORMATE函数内置字符集解析
  5. css3制作左右拉伸动画菜单
  6. C#重点知识详解（一） 选择自 masterall 的 Blog
  7. 火狐浏览器下点击a标签时出现虚线的解决方案
  8. Tensorflow学习笔记6：解决tensorflow训练过程中GPU未调用问题
  9. Java执行main方法，异常为:could not find the main class.program will exit
  10. fatal: You are not currently on a branch. 问题解决