当嵌套在ExtJS 5.0.0中时如何读取引用的对象

Question

Below code works fine with the data as in ReadOrder.json (below), however how to read the associated object when it is nested inside another object as in ReadOrderNested.json(below, within 'collection').

Question is more specifically can we use a mapping property or proxy's reader config with rootProperty (tried this approach with no luck)

Sencha fiddle : https://fiddle.sencha.com/#fiddle/9fb

Extjs version : 5.0.0

    //Base Model
Ext.define('MyApp.model.Base', {
    extend: 'Ext.data.Model',


    fields: [{
        name: 'id',
        type: 'int'
    }],


    schema: {
        namespace: 'MyApp.model'
    }
});




//Order Model
Ext.define('MyApp.model.Order', {
    extend: 'MyApp.model.Base',


    fields: [{
        name: 'customer',
        type: 'string'
    }, {
        name: 'paymentStatus',
        type: 'string'
    }]
});




//PaymentDetail Model
Ext.define('MyApp.model.PaymentDetail', {
    extend: 'MyApp.model.Base',
    fields: [{
        name: 'orderId',
        reference: 'Order'
    }, {
        name: 'cardNumber',
        type: 'string'
    }, {
        name: 'status',
        type: 'string'
    }]
});




Ext.define('MyApp.store.OrderStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.Order',
    proxy: {
        type: "rest",
        url: 'Order.json',
        appendId: false,
        api: {
            create: undefined,
            read: 'ReadOrder.json',
            update: 'UpdateOrder.json',
            destroy: undefined
        },
        reader: {
            type: 'json',
            rootProperty: 'order'
        },
        writer: {
            writeAllFields: true,
            allDataOptions: {
                persist: true,
                associated: true
            }
        }
    },
});








Ext.application({
    name: 'MyApp',


    launch: function() {


        var orderStore = Ext.create('MyApp.store.OrderStore');
        orderStore.load({
            callback: function(records) {
                var order = this.first();
                debugger;
                var paymentDetailList = order.paymentDetails();


                paymentDetailList.each(function(paymentDetail) {
                    //Print initial values of payment detail
                    console.log(paymentDetail.get('cardNumber'));
                    console.log(paymentDetail.get('status'));


                })


            }
        });


    }
});

Data : ReadOrder.json

{    "success": true,
    "order": [{
        "id": 1,
        "customer": "Philip J. Fry",
        "paymentStatus": "AWAIT_AUTH",
        "paymentDetails": [{
                orderId : 1,
                "cardNumber": "4111111111",
                "status": 'CREATED'
            }, {
                orderId : 1,
                "cardNumber": "4222222222",
                "status": "CREATED"
            }]
    }]
}

How to read with this data when the associated object is nested inside 'collection', ReadOrderNested.json:

{    "success": true,
    "order": [{
        "id": 1,
        "customer": "Philip J. Fry",
        "paymentStatus": "AWAIT_AUTH",
        "paymentDetails": {
            "collection" : [{
                orderId : 1,
                "cardNumber": "4111111111",
                "status": 'CREATED'
            }, {
                orderId : 1,
                "cardNumber": "4222222222",
                "status": "CREATED"
            }]}


    }]
}

Answer 1

I am using ExtJS 4, dunno whether there is a difference. I am using a model with fields like this:

fields: [{
    name: 'id',
    type: 'int'
},{
    name: 'paymentDetails'
}],

and when loading one model into a form

form.load(record);
Ext.getStore("paymentDetailsStore").removeAll();
Ext.getStore("paymentDetailsStore").loadRawData(record.get("paymentDetails"));

with paymentDetailsStore bound to a grid which is in the same window as the form.