For up to date documentation and features, visit http://docs.sencha.com/ext-js/4-0

Sencha Documentation

Associations enable you to express relationships between different Models. Let's say we're writing an ecommerce system where Users can make Orders - there's a relationship between these Models that we can express like this:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email'],

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

Ext.define('Order', {
    extend: 'Ext.data.Model',
    fields: ['id', 'user_id', 'status', 'price'],

    belongsTo: 'User'
});

We've set up two models - User and Order - and told them about each other. You can set up as many associations on each Model as you need using the two default types - hasMany and belongsTo. There's much more detail on the usage of each of those inside their documentation pages. If you're not familiar with Models already, there is plenty on those too.

Further Reading

Self association models

We can also have models that create parent/child associations between the same type. Below is an example, where groups can be nested inside other groups:


// Server Data
{
    "groups": {
        "id": 10,
        "parent_id": 100,
        "name": "Main Group",
        "parent_group": {
            "id": 100,
            "parent_id": null,
            "name": "Parent Group"
        },
        "child_groups": [{
            "id": 2,
            "parent_id": 10,
            "name": "Child Group 1"
        },{
            "id": 3,
            "parent_id": 10,
            "name": "Child Group 2"
        },{
            "id": 4,
            "parent_id": 10,
            "name": "Child Group 3"
        }]
    }
}

// Client code
Ext.define('Group', {
    extend: 'Ext.data.Model',
    fields: ['id', 'parent_id', 'name'],
    proxy: {
        type: 'ajax',
        url: 'data.json',
        reader: {
            type: 'json',
            root: 'groups'
        }
    },
    associations: [{
        type: 'hasMany',
        model: 'Group',
        primaryKey: 'id',
        foreignKey: 'parent_id',
        autoLoad: true,
        associationKey: 'child_groups' // read child data from child_groups
    }, {
        type: 'belongsTo',
        model: 'Group',
        primaryKey: 'id',
        foreignKey: 'parent_id',
        autoLoad: true,
        associationKey: 'parent_group' // read parent data from parent_group
    }]
});


Ext.onReady(function(){
    
    Group.load(10, {
        success: function(group){
            console.log(group.getGroup().get('name'));
            
            group.groups().each(function(rec){
                console.log(rec.get('name'));
            });
        }
    });
    
});
Defined By

Config Options

Other Configs

 

The string name of the model that is being associated with. Required

The string name of the model that is being associated with. Required

 

The name of the property in the data to read the association from. Defaults to the name of the associated model.

The name of the property in the data to read the association from. Defaults to the name of the associated model.

 

The string name of the model that owns the association. Required

The string name of the model that owns the association. Required

 
The name of the primary key on the associated model. Defaults to 'id'. In general this will be the Ext.data.Model.idP...

The name of the primary key on the associated model. Defaults to 'id'. In general this will be the Ext.data.Model.idProperty of the Model.

 
reader : Ext.data.reader.Reader

A special reader to read associated data

A special reader to read associated data

Defined By

Properties

 

The name of the model is on the other end of the association (e.g. if a User model hasMany Orders, this is 'Order')

The name of the model is on the other end of the association (e.g. if a User model hasMany Orders, this is 'Order')

 

The name of the model that 'owns' the association

The name of the model that 'owns' the association

Defined By

Methods

 

 

Parameters

  • config : Object

    Optional config object

Returns

  • void   
 

Get a specialized reader for reading associated data

Get a specialized reader for reading associated data

Returns

  • Ext.data.reader.Reader   

    The reader, null if not supplied