标签:
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 |
标签:
原文地址:http://www.cnblogs.com/wang3680/p/ac3e7de38fec3aaa9f23a35ecb8d8779.html