association loading

by el_chief

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

JavaScript

/* this is a function to simulate ajax requests in jsfiddle */
function sim(proxy, data, delay) {
    if (typeof data !== 'string') {
        data = Ext.JSON.encode(data);
    }

    proxy.url = '/echo/json/';
    proxy.actionMethods.read = "POST";
    proxy.extraParams.json = data;
    proxy.extraParams.delay = typeof delay == 'undefined' ? 0 : delay;
}


Ext.define('Party', {
    extend:'Ext.data.Model',
    fields:[
    'id', 'name'        
    ],
    hasMany:[
        {
            name:'documents',
            model:'Document',
            foreignKey:'ownerId',
            associationKey:'documents'
        }
    ]
});

Ext.define('Document', {
    extend:'Ext.data.Model',
    fields:[
    'id','ownerId','body'
    ],
    hasMany:[
        {
            name:'roles',
            model:'DocumentRole',
            foreignKey:'documentId',
            associationKey:'roles'
        }
    ]
});

Ext.define('DocumentRole', {
    extend:'Ext.data.Model',
    fields:[
        'documentId', 'partyId', 'roleType', 'fromDate'
    ],
    belongsTo:[
        {
            name:'document',
            model:'Document',
            foreignKey:'documentId'
        },
        {
            name:'party',
            model:'Party',
            foreignKey:'partyId'
        }
    ]
});

/*
nested loading
*/

sim(Party.proxy, {id:3, name:'neil', documents:[{id:2, ownerId:3, body:'this is a document', roles:[{partyId:4, documentId:2, roleType:'editor', fromDate:'2012-07-26'}]}]});

Party.load(3, {
    callback: function(record){
        
        /* show the related data*/
        console.log(record.data, record.documents().first().data, record.documents().first().roles().first().data);
        
       
    }
});