How do I setup the associations correctly in the ExtJS 5 and load them on demand?

Question

Just starting and evaluating ExtJS and trying to understand the Data package. I will try to describe as clear as possible what my issue is and where I need help.

My grid shows my models (User models) correctly in the grid. These models are served by a store which is using a proxy to a Rest service.

My models has associations to Group and Address and Music albums. All of the models has a Store and a Rest back-end.

A grid row onclick shows me the record in the console:

 constructor {data: Object, session: null, internalId: 3, id: 1, phantom: false…}
Ext.data.Model#persistenceProperty: (...)
data: Object
    addressId: 1
    albums: Array[1]
    0: Object
    length: 1
    __proto__: Array[0]
    group: "Customers"
    id: 2
    name: "Flora"
id: 1
internalId: 3
joined: Array[1]
0: constructor
length: 1
__proto__: Array[0]
phantom: false
raw: Object
session: null
store: constructor
__proto__: Object

How do I bind all my models together? For example: I want to load the complete Address model when I want it. Meaning a new call to the Address server.

How do I setup the associations correctly in the ExtJS5 way?

Associations:
User 1------1 Address
User 1------1 Group
User 1------n Album

Below are my Rest response and javascript classes. As of example and exercise I'd choose to added the Albums in one response and the Address as a foreign key.

------------------------------------------

JSON response:
[{
    "addressId": 1,
    "albums": [{
        "id": 1,
        "name": "Dark Side Of The Moon"
    },
    {
        "id": 2,
        "name": "A Night At The Opera"
    }],
    "id": 1,
    "name": "Peter",
    "group": {
        "id": 1,
        "name": "Users"
    }
},
{
    "addressId": 1,
    "albums": [{
        "id": 2,
        "name": "A Night At The Opera"
    }],
    "id": 2,
    "name": "Flora",
    "group": {
        "id": 2,
        "name": "Customers"
    }
}]
------------------------------------------

model User.js:

Ext.define('MyApp.model.User', {
    extend: 'MyApp.model.Base',
    requires: ['MyApp.model.Group'],
    fields: [{
        name: 'addressId',
        reference: 'Address',
        unique: true // one-to-one
    }, {
        name: 'group',
        mapping: 'group.name'
    }],
    hasMany: {
        model: 'Album', 
        name: 'albums', 
        associationKey: 'albums'
    }
});
------------------------------------------

model Album.js:

Ext.define('MyApp.model.Album', {
    extend: 'MyApp.model.Base',
    belongsTo: ['User']
});
------------------------------------------

model Group.js:

Ext.define('MyApp.model.Group', {
    extend: 'MyApp.model.Base'
});
------------------------------------------

model Base.js:

Ext.define('MyApp.model.Base', {
    extend: 'Ext.data.Model',
    schema: {
        namespace: 'MyApp.model'
    }
});
------------------------------------------

store User.js

Ext.define('MyApp.store.User', {
    extend: 'MyApp.store.Base',
    model: 'MyApp.model.User',
    proxy: {
        url: 'http://localhost/restfulapi/api.php/user'
    }
});
------------------------------------------

store Base.js

Ext.define('MyApp.store.Base', {
    extend: 'Ext.data.Store',
    proxy: {
        type: 'rest',
        reader: {
            type: 'json'
        },
        writer: {
            type: 'json'
        }
    },
    autoLoad: true,
    autoSync: true
});

Thanks for your response!

Richard

Evan Trimboli Evan Trimboli · Accepted Answer · 2015-02-19T10:29:24

You would declare your models like so:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'addressId',
        reference: 'Address',
        unique: true
    }, {
        name: 'groupId',
        reference: 'Group',
        unique: true
    }]
});

Ext.define('Album', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'userId',
        reference: 'User'
    }]
});

Ext.define('Address', {
    extend: 'Ext.data.Model'
});

Ext.define('Group', {
    extend: 'Ext.data.Model'
});

By declaring your associations, you will also create various getters (and in some cases setters) on the models.

User.load(1, {
    success: function(rec) {
        rec.getGroup(); // Returns the nested loaded reference
        rec.getAddress(); // Will hit the address proxy for Address id 1
        rec.albums(); // Returns a store of the loaded albums
    }
});

How do I setup the associations correctly in the ExtJS 5 and load them on demand?

1 Answers