码迷,mamicode.com
首页 > Web开发 > 详细

extJS4.2.0 Json数据解析,嵌套及非嵌套(二)

时间:2015-05-28 12:29:54      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

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

























extJS4.2.0 Json数据解析,嵌套及非嵌套(二)

标签:

原文地址:http://www.cnblogs.com/wang3680/p/ac3e7de38fec3aaa9f23a35ecb8d8779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!