Sencha(Extjs) Ext.data.Store与Reader结合加载多重嵌套数据对象

Sencha(Extjs) Ext.data.Store与Reader结合加载多重嵌套数据对象


Ext.data.Readers常用于解析Model或Store中加载的数据，例如Ajax请求返回的数据（XML/JSON）。通过对每个Model的associations的属性配置，Readers也可以自动加载多重嵌套（deeply-nested）的数据对象。下面举一个CRM系统中的各个数据对象相互关联的关系，用来说明Reader的灵活性。系统涉及User、Orders、 OrderItems和Products。首先我们定义models:




Ext.regModel("User", {
    fields: [
        'id', 'name'
    ],


    hasMany: {model: 'Order', name: 'orders'},


    proxy: {
        type: 'rest',
        url : 'users.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});


Ext.regModel("Order", {
    fields: [
        'id', 'total'
    ],


    hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
    belongsTo: 'User'
});


Ext.regModel("OrderItem", {
    fields: [
        'id', 'price', 'quantity', 'order_id', 'product_id'
    ],


    belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});


Ext.regModel("Product", {
    fields: [
        'id', 'name'
    ],


    hasMany: 'OrderItem'
});


 这里我们虚构消费数据如下：


 {




    "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"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}


 现在我们可以试着读取和使用这些数据，方法如下：




var store = new Ext.data.Store({
    model: "User"
});


store.load({
    callback: function() {
        //the user that was loaded
        var user = store.first();


        console.log("Orders for " + user.get('name') + ":")


        //iterate over the Orders for each User
        user.orders().each(function(order) {
            console.log("Order ID: " + order.getId() + ", which contains items:");


            //iterate over the OrderItems for each Order
            order.orderItems().each(function(orderItem) {
                //we know that the Product data is already loaded, so we can use the synchronous getProduct
                //usually, we would use the asynchronous version (see Ext.data.BelongsToAssociation)
                var product = orderItem.getProduct();


                console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));
            });
        });
    }
});


运行结果如下：
Orders for Ed:
Order ID: 50, which contains items:
2 orders of MacBook Pro
3 orders of iPhone