Readers are used to interpret data to be loaded into a Model instance or a Store - often in response to an AJAX request.(Readers是用来解析加载的数据到模型对象或Store中,经常是解析AJAX请求的反应。) In general there is usually no need to create a Reader instance directly, since a Reader is almost always used together with a Proxy, and is configured using the Proxy'sreader configuration property:(一般是没有必要直接创建Reader对象,因为Reader经常和Proxy一起使用,使用Proxy的reader的配置属性进行配置:)

 
  
  1. Ext.create('Ext.data.Store', { 
  2.     model: 'User'
  3.     proxy: { 
  4.         type: 'ajax'
  5.         url : 'users.json'
  6.         reader: { 
  7.             type: 'json'
  8.             root: 'users' 
  9.         } 
  10.     }, 
  11. }); 

The above reader is configured to consume a JSON string that looks something like this:(上面的reader配置来解析JSON字符串的,JSON字符串看起来如下面的形式:)

 
  
  1.     "success"true
  2.     "users": [ 
  3.         { "name""User 1" }, 
  4.         { "name""User 2" } 
  5.     ] 

Loading Nested Data(加载内置数据)

Readers have the ability to automatically load deeply-nested data objects based on the associations configured on each Model.(Readers是有能力自动读取深沉内嵌的数据对象的,它是基于每个模型的associations 配置) Below is an example demonstrating the flexibility of these associations in a fictional CRM system which manages a User, their Orders, OrderItems and Products. (下面这个例子展示这种能力关联的灵活性,虚构的CRM系统管理用户,它们的订单和订单想项和产品)First we'll define the models:(首先我们定义这个模型:)

 
  
  1. Ext.define("User", { 
  2.     extend: 'Ext.data.Model'
  3.     fields: [ 
  4.         'id''name' 
  5.     ], 
  6.  
  7.     hasMany: {model: 'Order', name: 'orders'}, 
  8.  
  9.     proxy: { 
  10.         type: 'rest'
  11.         url : 'users.json'
  12.         reader: { 
  13.             type: 'json'
  14.             root: 'users' 
  15.         } 
  16.     } 
  17. }); 
  18.  
  19. Ext.define("Order", { 
  20.     extend: 'Ext.data.Model'
  21.     fields: [ 
  22.         'id''total' 
  23.     ], 
  24.  
  25.     hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'}, 
  26.     belongsTo: 'User' 
  27. }); 
  28.  
  29. Ext.define("OrderItem", { 
  30.     extend: 'Ext.data.Model'
  31.     fields: [ 
  32.         'id''price''quantity''order_id''product_id' 
  33.     ], 
  34.  
  35.     belongsTo: ['Order', {model: 'Product', associationKey: 'product'}] 
  36. }); 
  37.  
  38. Ext.define("Product", { 
  39.     extend: 'Ext.data.Model'
  40.     fields: [ 
  41.         'id''name' 
  42.     ], 
  43.  
  44.     hasMany: 'OrderItem' 
  45. }); 

The JSON response is deeply nested - it returns all Users (in this case just 1 for simplicity's sake), all of the Orders for each User (again just 1 in this case), all of the OrderItems for each Order (2 order items in this case), and finally the Product associated with each OrderItem.(这个JSON反应是深层内嵌的,它会会所有的用户,在这里为了简单的原因只有一个,每个用户的所有订单,在这个例子中也是只有一个,每个订单的所有订单项,这里只有两个订单项,最后产品和所有的订单项关联。) Now we can read the data and use it as follows:(现在我们像下面读取数据和使用它们)

 
  
  1. var store = Ext.create('Ext.data.Store', { 
  2.     model: "User" 
  3. }); 
  4.  
  5. store.load({ 
  6.     callback: function() { 
  7.         //the user that was loaded 
  8.         var user = store.first(); 
  9.  
  10.         console.log("Orders for " + user.get('name') + ":"
  11.  
  12.         //iterate over the Orders for each User 
  13.         user.orders().each(function(order) { 
  14.             console.log("Order ID: " + order.getId() + ", which contains items:"); 
  15.  
  16.             //iterate over the OrderItems for each Order 
  17.             order.orderItems().each(function(orderItem) { 
  18.                 //we know that the Product data is already loaded, so we can use the synchronous getProduct 
  19.                 //usually, we would use the asynchronous version (see Ext.data.association.BelongsTo) 
  20.                 var product = orderItem.getProduct(); 
  21.  
  22.                 console.log(orderItem.get('quantity') + ' orders of ' + product.get('name')); 
  23.             }); 
  24.         }); 
  25.     } 
  26. }); 

Running the code above results in the following:(运行上面的代码得到如下的结果:)

 Orders for Ed:

 Order ID: 50, which contains items:

 2 orders of MacBook Pro

 3 orders of iPhone

下面是具体的例子:

reader.js

 
  
  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.          
  4.                 Ext.define("User", { 
  5.                     extend: 'Ext.data.Model'
  6.                     fields: [ 
  7.                         'id''name' 
  8.                     ], 
  9.                  
  10.                     hasMany: {model: 'Order', name: 'orders'}, 
  11.                  
  12.                     proxy: { 
  13.                         type: 'rest'
  14.                         url : 'users.jsp'
  15.                         reader: { 
  16.                             type: 'json'
  17.                             root: 'users' 
  18.                         } 
  19.                     } 
  20.                 }); 
  21.                      
  22.                 Ext.define("Order", { 
  23.                     extend: 'Ext.data.Model'
  24.                     fields: [ 
  25.                         'id''total' 
  26.                     ], 
  27.                  
  28.                     hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'}, 
  29.                     belongsTo: 'User' 
  30.                 }); 
  31.                  
  32.                 Ext.define("OrderItem", { 
  33.                     extend: 'Ext.data.Model'
  34.                     fields: [ 
  35.                         'id''price''quantity''order_id''product_id' 
  36.                     ], 
  37.                  
  38.                     belongsTo: ['Order', {model: 'Product', associationKey: 'product'}] 
  39.                 }); 
  40.                  
  41.                 Ext.define("Product", { 
  42.                     extend: 'Ext.data.Model'
  43.                     fields: [ 
  44.                         'id''name' 
  45.                     ], 
  46.                  
  47.                     hasMany: 'OrderItem' 
  48.                 });  
  49.                  
  50.                 Ext.create('Ext.data.Store', { 
  51.                   model: 'User'
  52.                   proxy: { 
  53.                       type: 'ajax'
  54.                       url : 'users.json'
  55.                       reader: { 
  56.                           type: 'json'
  57.                           root: 'users' 
  58.                       } 
  59.                   }, 
  60.                 }); 
  61.                  
  62.                 var store = Ext.create('Ext.data.Store', { 
  63.                   model: "User" 
  64.                 }); 
  65.                  
  66.                 store.load({ 
  67.                   callback: function() { 
  68.                       //the user that was loaded 
  69.                       var user = store.first(); 
  70.                  
  71.                       console.log("Orders for " + user.get('name') + ":"
  72.                  
  73.                       //iterate over the Orders for each User 
  74.                       user.orders().each(function(order) { 
  75.                           console.log("Order ID: " + order.getId() + ", which contains items:"); 
  76.                  
  77.                           //iterate over the OrderItems for each Order 
  78.                           order.orderItems().each(function(orderItem) { 
  79.                               //we know that the Product data is already loaded, so we can use the synchronous getProduct 
  80.                               //usually, we would use the asynchronous version (see Ext.data.association.BelongsTo) 
  81.                               var product = orderItem.getProduct(); 
  82.                  
  83.                               console.log(orderItem.get('quantity') + ' orders of ' + product.get('name')); 
  84.                           }); 
  85.                       }); 
  86.                   } 
  87.                 }); 
  88.  
  89.                  
  90.     }); 
  91. })(); 

reader.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="reader.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 

运行结果:

Orders for Ed: reader.js:71

Order ID: 50, which contains items: reader.js:75

2 orders of MacBook Pro reader.js:83

3 orders of iPhone 

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

 

True to automatically parse models nested within other models in a response object. See the Ext.data.reader.Reader intro docs for full explanation.(为true的时候自动转换响应的对象的其他内置模型)

Defaults to: true

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

 

Name of the property from which to retrieve the success attribute, the value of which indicates whether a given request succeeded or failed (typically a boolean or 'true'|'false'). See Ext.data.proxy.Server.exception for additional information.(检索成功的属性的名字,这个值指明了给定的请求成果成功或者失败。)

Defaults to: "success"

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

Name of the property from which to retrieve the total number of records in the dataset. This is only needed if the whole dataset is not passed in one go, but is being paged from the remote server.(检索数据集中记录的总条数的属性,在数据集不是一次传递过来,而是分页从远程服务器传递过来的时候需要。)

Defaults to: "total"

 

1111111111111


1