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