extJS4.2.0 Json数据解析,嵌套及非嵌套（二）

Ext.data.reader.Reader

Readers通常用于翻译数据，使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据. 一般情况下不需要直接创建一个Reader实例， 因为Reader总是和Proxy一起使用， 且其将使用Proxy的reader 配置属性配置

1 2 3 4 5 6 7 8 9 10 11

Ext.create( 'Ext.data.Store' , {      model: 'User' ,      proxy: {          type: 'ajax' ,          url : 'users.json' ,          reader: {              type: 'json' ,              root: 'users'          }      }, });

以上的reader是配置来消耗一个JSON字符串，使其开起来如下:

1 2 3 4 5 6 7

{      "success" : true ,      "users" : [          { "name" : "User 1" },          { "name" : "User 2" }      ] }

加载嵌套数据

根据每个模型上的associations配置，Readers拥有自动加载多级嵌套的数据对象的能力. 以下是一个例子，用于验证一个虚构的CRM系统（管理了User、Orders、OrderItems、Products等模型）中的各种结合的灵活性。 首先我们要定义这些模型:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Ext.define( "User" , {      extend: 'Ext.data.Model' ,      fields: [          'id' , 'name'      ],        hasMany: {model: 'Order' , name: 'orders' },        proxy: {          type: 'rest' ,          url : 'users.json' ,          reader: {              type: 'json' ,              root: 'users'          }      } });   Ext.define( "Order" , {      extend: 'Ext.data.Model' ,      fields: [          'id' , 'total'      ],        hasMany  : {model: 'OrderItem' , name: 'orderItems' , associationKey: 'order_items' },      belongsTo: 'User' });   Ext.define( "OrderItem" , {      extend: 'Ext.data.Model' ,      fields: [          'id' , 'price' , 'quantity' , 'order_id' , 'product_id'      ],        belongsTo: [ 'Order' , {model: 'Product' , associationKey: 'product' }] });   Ext.define( "Product" , {      extend: 'Ext.data.Model' ,      fields: [          'id' , 'name'      ],        hasMany: 'OrderItem' });

这个可能有很多种理解 - 基本上，一个Usrer拥有多个Orders，而每个Orders是由多个OrderItems组成的。 最后，每个OrderItem都包含单独一个Product. 这就允许我们重构造数据如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

{      "users" : [          {              "id" : 123,              "name" : "Ed" ,              "orders" : [                  {                      "id" : 50,                      "total" : 100,                      "order_items" : [                          {                              "id"      : 20,                              "price"   : 40,                              "quantity" : 2,                              "product" : {                                  "id" : 1000,                                  "name" : "MacBook Pro"                              }                          },                          {                              "id"      : 21,                              "price"   : 20,                              "quantity" : 3,                              "product" : {                                  "id" : 1001,                                  "name" : "iPhone"                              }                          }                      ]                  }              ]          }      ] }

该JSON响应就是多级嵌套- 将返回所有的Users(在本例中为简单起见，只写了一个User), 每个User中的Orders的所有项(一样只写其中一个为例)， 每个Order中的OrderItems的所有项(本例中显示了2个order项),最后Product通过每个OrderItem关联在一起. 现在我们可以读取数据并使用它通过如下方式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

var store = Ext.create( 'Ext.data.Store' , {      model: "User" });   store.load({      callback: function () {          //被加载的user          var user = store.first();            console.log( "Orders for " + user.get( 'name' ) + ":" )            //遍历每个User中的Orders          user.orders().each( function (order) {              console.log( "Order ID: " + order.getId() + ", which contains items:" );                //遍历每个Order中的OrderItems              order.orderItems().each( function (orderItem) {                  //我们都知道Product数据已经被加载，所以我们可以使用同步方法getProduct                  //一般来说，我们会使用异步版本的 (参考 Ext.data.association.BelongsTo)                  var product = orderItem.getProduct();                    console.log(orderItem.get( 'quantity' ) + ' orders of ' + product.get( 'name' ));              });          });      } });

运行以上代码，结果如下:

1 2 3 4

Orders for Ed: Order ID: 50, which contains items: 2 orders of MacBook Pro 3 orders of iPhone

来自为知笔记(Wiz)