如何在 ExtJS 5 中正确设置关联并按需加载？

Question

刚刚开始和评估 ExtJS 并试图理解 Data 包。我会尽量清楚地描述我的问题是什么以及我需要帮助的地方。

我的网格在网格中正确显示了我的模型（用户模型）。这些模型由使用代理到 ​​Rest 服务的商店提供服务。

我的模型与组和地址以及音乐专辑有关联。所有模型都有一个 Store 和一个 Rest 后端。

一个网格行 onclick 向我显示控制台中的记录：

 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

如何将所有模型绑定在一起？例如：我想在需要时加载完整的地址模型。意味着对地址服务器的新调用。

如何以 ExtJS5 方式正确设置关联？

协会：
用户 1--------1 地址
用户 1--------1 组
用户 1-----n 相册

以下是我的 Rest 响应和 javascript 类。作为示例和练习，我会选择在一个响应中添加相册，并将地址添加为外键。

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

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
});

感谢您的回复！

理查德

Answer 1

你可以像这样声明你的模型：

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'
});

通过声明关联，您还将在模型上创建各种 getter（在某些情况下还包括 setter）。

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
    }
});