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.  
         
  2.     extend: 'Ext.data.Model', 
    3.  
         
  3.     fields: ['id', 'name', 'email'] 
    4.  
         
  4. }); 
    5.  
         
  5.  
    6.  
         
  6. var store = Ext.create('Ext.data.Store', { 
    7.  
         
  7.     model: 'User', 
    8.  
         
  8.     proxy: { 
    9.  
         
  9.         type: 'ajax', 
    10.  
         
  10.         url : 'users.json', 
    11.  
         
  11.         reader: { 
    12.  
         
  12.             type: 'json' 
    13.  
         
  13.         } 
    14.  
         
  14.     } 
    15.  
         
  15. }); 
    16.  
        
 
    
 
 
    
The example above creates a 'User' model. Models are explained in the  docs if you're not already familiar with them.（上面例子创建了一个‘User’模型，如果你不熟悉模型，可以产看Model的文档。）
 
    
We created the simplest type of JSON Reader possible by simply telling our 's  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.  
         
  2.     type : 'json', 
    3.  
         
  3.     model: 'User' 
    4.  
         
  4. } 
    5.  
        
 
    
 
 
    
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.  
         
  2.     { 
    3.  
         
  3.         "id": 1, 
    4.  
         
  4.         "name": "Ed Spencer", 
    5.  
         
  5.         "email": "ed@sencha.com" 
    6.  
         
  6.     }, 
    7.  
         
  7.     { 
    8.  
         
  8.         "id": 2, 
    9.  
         
  9.         "name": "Abe Elias", 
    10.  
         
  10.         "email": "abe@sencha.com" 
    11.  
         
  11.     } 
    12.  
         
  12. ] 
    13.  
        
 
    
 
 
    
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  configuration to parse data that comes back like this:(例如我们使用root配置来转换传回来的数据：)
 
    
 
    
     
         
  1. { 
    2.  
         
  2.     "users": [ 
    3.  
         
  3.        { 
    4.  
         
  4.            "id": 1, 
    5.  
         
  5.            "name": "Ed Spencer", 
    6.  
         
  6.            "email": "ed@sencha.com" 
    7.  
         
  7.        }, 
    8.  
         
  8.        { 
    9.  
         
  9.            "id": 2, 
    10.  
         
  10.            "name": "Abe Elias", 
    11.  
         
  11.            "email": "abe@sencha.com" 
    12.  
         
  12.        } 
    13.  
         
  13.     ] 
    14.  
         
  14. } 
    15.  
        
 
    
 
 
    
To parse this we just pass in a  configuration that matches the 'users' above:(为了转换上面的数据，我们传递root配置来匹配‘users’。)
 
    
 
    
     
         
  1. reader: { 
    2.  
         
  2.     type: 'json', 
    3.  
         
  3.     root: 'users' 
    4.  
         
  4. } 
    5.  
        
 
    
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.  
         
  2.     "total": 122, 
    3.  
         
  3.     "offset": 0, 
    4.  
         
  4.     "users": [ 
    5.  
         
  5.         { 
    6.  
         
  6.             "id": "ed-spencer-1", 
    7.  
         
  7.             "value": 1, 
    8.  
         
  8.             "user": { 
    9.  
         
  9.                 "id": 1, 
    10.  
         
  10.                 "name": "Ed Spencer", 
    11.  
         
  11.                 "email": "ed@sencha.com" 
    12.  
         
  12.             } 
    13.  
         
  13.         } 
    14.  
         
  14.     ] 
    15.  
         
  15. } 
    16.  
        
 
    
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  configuration like this:（为了转换每个‘user’项我们需要像下面这样指定记录的配置。）
 
    
 
    
     
         
  1. reader: { 
    2.  
         
  2.     type  : 'json', 
    3.  
         
  3.     root  : 'users', 
    4.  
         
  4.     record: 'user' 
    5.  
         
  5. } 
    6.  
        
 
    
 
 
    
 
 下面是三个例子： 
    
json.html
 
    
 
    
     
         
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    5.  
         
  5. <title>reader</title> 
    6.  
         
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
    7.  
         
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
    8.  
         
  8. <script type="text/javascript" src="json2.js"></script> 
    9.  
         
  9. </head> 
    10.  
         
  10. <body> 
    11.  
         
  11. </body> 
    12.  
         
  12. </html> 
    13.  
        
 
    
------------------------------------------------------------------------------------
 
    
json.js
 
    
 
    
     
         
  1. (function(){ 
    2.  
         
  2.     Ext.onReady(function(){ 
    3.  
         
  3.          
    4.  
         
  4.      
    5.  
         
  5.             Ext.define('User', { 
    6.  
         
  6.               extend: 'Ext.data.Model', 
    7.  
         
  7.               fields: ['id', 'name', 'email'] 
    8.  
         
  8.             }); 
    9.  
         
  9.              
    10.  
         
  10.             var store = Ext.create('Ext.data.Store', { 
    11.  
         
  11.               model: 'User', 
    12.  
         
  12.               proxy: { 
    13.  
         
  13.                   type: 'ajax', 
    14.  
         
  14.                   url : 'json.jsp', 
    15.  
         
  15.                   reader: { 
    16.  
         
  16.                       type: 'json', 
    17.  
         
  17.                       model: 'User' 
    18.  
         
  18.                   } 
    19.  
         
  19.               } 
    20.  
         
  20.             }); 
    21.  
         
  21.              
    22.  
         
  22.           store.load({ 
    23.  
         
  23.               callback: function() { 
    24.  
         
  24.                   //the user that was loaded 
    25.  
         
  25.                   var user = store.first();  
    26.  
         
  26.                   console.log(user);     
    27.  
         
  27.                   console.log("Orders for " + user.get('name') + ":"); 
    28.  
         
  28.               } 
    29.  
         
  29.             }); 
    30.  
         
  30.              
    31.  
         
  31.      
    32.  
         
  32.     });  
    33.  
         
  33. })(); 
    34.  
        
 
    
json.jsp
 
    
 
    
     
         
  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
    2.  
         
  2. <% 
    3.  
         
  3.    response.getWriter().write("[" 
    4.  
         
  4.     +"{" 
    5.  
         
  5.         +"\"id\": 1," 
    6.  
         
  6.         +"\"name\": \"Ed Spencer\"," 
    7.  
         
  7.         +"\"email\": \"ed@sencha.com\"" 
    8.  
         
  8.    +" }," 
    9.  
         
  9.     +"{" 
    10.  
         
  10.        +" \"id\": 2," 
    11.  
         
  11.         +"\"name\": \"Abe Elias\"," 
    12.  
         
  12.         +"\"email\": \"abe@sencha.com\"" 
    13.  
         
  13.     +"}" 
    14.  
         
  14. +"]"); 
    15.  
         
  15. %> 
    16.  
        
 
    
---------------------------------------------------------------------------------
 
    
json2.js
 
    
 
    
     
         
  1. (function(){ 
    2.  
         
  2.     Ext.onReady(function(){ 
    3.  
         
  3.          
    4.  
         
  4.      
    5.  
         
  5.             Ext.define('User', { 
    6.  
         
  6.               extend: 'Ext.data.Model', 
    7.  
         
  7.               fields: ['id', 'name', 'email'] 
    8.  
         
  8.             }); 
    9.  
         
  9.              
    10.  
         
  10.             var store = Ext.create('Ext.data.Store', { 
    11.  
         
  11.               model: 'User', 
    12.  
         
  12.               proxy: { 
    13.  
         
  13.                   type: 'ajax', 
    14.  
         
  14.                   url : 'json2.jsp', 
    15.  
         
  15.                   reader: { 
    16.  
         
  16.                       type: 'json', 
    17.  
         
  17.                       model: 'User', 
    18.  
         
  18.                       root: 'users' 
    19.  
         
  19.                   } 
    20.  
         
  20.               } 
    21.  
         
  21.             }); 
    22.  
         
  22.              
    23.  
         
  23.           store.load({ 
    24.  
         
  24.               callback: function() { 
    25.  
         
  25.                   //the user that was loaded 
    26.  
         
  26.                   var user = store.first();  
    27.  
         
  27.                   console.log(user);     
    28.  
         
  28.                   console.log("Orders for " + user.get('name') + ":"); 
    29.  
         
  29.               } 
    30.  
         
  30.             }); 
    31.  
         
  31.              
    32.  
         
  32.      
    33.  
         
  33.     });  
    34.  
         
  34. })(); 
    35.  
        
 
    
json2.jsp
 
    
 
    
     
         
  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
    2.  
         
  2. <% 
    3.  
         
  3.    response.getWriter().write("{" 
    4.  
         
  4.     +"\"users\": [" 
    5.  
         
  5.        +"{" 
    6.  
         
  6.           +" \"id\": 1," 
    7.  
         
  7.           +" \"name\": \"Ed Spencer\"," 
    8.  
         
  8.           +" \"email\": \"ed@sencha.com\"" 
    9.  
         
  9.       +" }," 
    10.  
         
  10.       +" {" 
    11.  
         
  11.         +"   \"id\": 2," 
    12.  
         
  12.         +"  \"name\": \"Abe Elias\"," 
    13.  
         
  13.         +"   \"email\": \"abe@sencha.com\"" 
    14.  
         
  14.       +" }" 
    15.  
         
  15.    +" ]" 
    16.  
         
  16. +"}"); 
    17.  
         
  17. %> 
    18.  
        
 
    
------------------------------------------------------------------------------------
 
    
json3.js
 
    
 
    
     
         
  1. (function(){ 
    2.  
         
  2.     Ext.onReady(function(){ 
    3.  
         
  3.          
    4.  
         
  4.      
    5.  
         
  5.             Ext.define('User', { 
    6.  
         
  6.               extend: 'Ext.data.Model', 
    7.  
         
  7.               fields: ['id', 'name', 'email'] 
    8.  
         
  8.             }); 
    9.  
         
  9.              
    10.  
         
  10.             var store = Ext.create('Ext.data.Store', { 
    11.  
         
  11.               model: 'User', 
    12.  
         
  12.               proxy: { 
    13.  
         
  13.                   type: 'ajax', 
    14.  
         
  14.                   url : 'json3.jsp', 
    15.  
         
  15.                   reader: { 
    16.  
         
  16.                       type: 'json', 
    17.  
         
  17.                       model: 'User', 
    18.  
         
  18.                       root  : 'users', 
    19.  
         
  19.                             record: 'user' 
    20.  
         
  20.                   } 
    21.  
         
  21.               } 
    22.  
         
  22.             }); 
    23.  
         
  23.              
    24.  
         
  24.           store.load({ 
    25.  
         
  25.               callback: function() { 
    26.  
         
  26.                   //the user that was loaded 
    27.  
         
  27.                   var user = store.first();  
    28.  
         
  28.                   console.log(user);     
    29.  
         
  29.                   console.log("Orders for " + user.get('name') + ":"); 
    30.  
         
  30.               } 
    31.  
         
  31.             }); 
    32.  
         
  32.              
    33.  
         
  33.      
    34.  
         
  34.     });  
    35.  
         
  35. })(); 
    36.  
        
 
    
json3.jsp
 
    
 
    
     
         
  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
    2.  
         
  2. <% 
    3.  
         
  3.    response.getWriter().write("{" 
    4.  
         
  4.     +"\"total\": 122," 
    5.  
         
  5.     +"\"offset\": 0," 
    6.  
         
  6.     +"\"users\": [" 
    7.  
         
  7.         +"{" 
    8.  
         
  8.             +"\"id\": \"ed-spencer-1\"," 
    9.  
         
  9.             +"\"value\": 1," 
    10.  
         
  10.             +"\"user\": {" 
    11.  
         
  11.                 +"\"id\": 1," 
    12.  
         
  12.                 +"\"name\": \"Ed Spencer\"," 
    13.  
         
  13.                 +"\"email\": \"ed@sencha.com\"" 
    14.  
         
  14.             +"}" 
    15.  
         
  15.         +"}" 
    16.  
         
  16.     +"]" 
    17.  
         
  17. +"}"); 
    18.  
         
  18. %> 
    19.  
        
 
    
1111111111111111
 
    
1111111111111