Associations and class names

Question

I tried to build a very simple application that creates a store based on two associated models. (It is based on an example you can find here.) This works if I use a shore class name. However, it does not work anymore as soon as I use the class name with the path and the application name, as I was used to do.

I made the following changes:

• Changed "Pessoa" to "Aap.model.Pessoa"
• Changed "Endereco" to "Aap.model.Endereco"

Could somebody please explain to me:

1. What is the underlying problem?
2. What do I have to change in order to make the assosiations work in the second example

---

Example that works

app.js:

Ext.Loader.setConfig({
    enabled: true, // Allows dynamc loading of JavaSCript files
    disableCaching: false // Disable random parameter in the URLs path}); 

Ext.application({
    name: 'Aap',
    models: ['Pessoa', 'Endereco']});

app/model/Pessoa.js:

Ext.define('Pessoa', {
extend: 'Ext.data.Model',
fields: [
        {name: 'id', type: 'int'},
        {name: 'nome', type: 'string'}
],
proxy: {
    type: 'rest',
    url: 'data/data',
    format: 'json'
},  
          hasOne: {model: 'Endereco', foreignKey: 'pessoaId'} }

app/model/Endereco.js:

Ext.define('Endereco', {
extend: 'Ext.data.Model',
fields: [
    {name: 'id', type: 'int'},
    {name: 'logradouro', type: 'string'}
]});

data/data.json:

[
{
    "id": 1,
    "nome": "Loiane",
    "sobrenome": "Groner",
    "endereco": {
        "id": 14,
        "logradouro": "rua ficticia",
        "numero": "100"
    }
},
{
    "id": 2,
    "nome": "Tom",
    "sobrenome": "Stock",
    "endereco": {
        "id": 34,
        "logradouro": "reality street",
        "numero": "55"
    }
}]

Command in the browser console:

   pessoaStore = new Ext.data.Store({
    autoLoad: true,
model: 'Pessoa'
});

As a result I get a store with two properly associated model. If I change the class name, however, association does not work anymore.

---

Example that does not work

app.js:

Ext.Loader.setConfig({
    enabled: true, // Allows dynamc loading of JavaSCript files
    disableCaching: false // Disable random parameter in the URLs path}); 

Ext.application({
    name: 'Aap',
    models: ['Aap.model.Pessoa', 'Aap.model.Endereco']});

app/model/Pessoa.js:

Ext.define('Aap.model.Pessoa', {
extend: 'Ext.data.Model',
fields: [
        {name: 'id', type: 'int'},
        {name: 'nome', type: 'string'}
],
proxy: {
    type: 'rest',
    url: 'data/data',
    format: 'json'
},  
          hasOne: {model: 'Aap.model.Endereco', foreignKey: 'pessoaId'} }

app/model/Endereco.js:

Ext.define('Aap.model.Endereco', {
extend: 'Ext.data.Model',
fields: [
    {name: 'id', type: 'int'},
    {name: 'logradouro', type: 'string'}
]});

data/data.json:

[
{
    "id": 1,
    "nome": "Loiane",
    "sobrenome": "Groner",
    "endereco": {
        "id": 14,
        "logradouro": "rua ficticia",
        "numero": "100"
    }
},
{
    "id": 2,
    "nome": "Tom",
    "sobrenome": "Stock",
    "endereco": {
        "id": 34,
        "logradouro": "reality street",
        "numero": "55"
    }
}]

Command in the browser console:

pessoaStore = new Ext.data.Store({
    autoLoad: true,
    model: 'Aap.model.Pessoa'
});

Here I get as a result the store with the data of the "Pessoa" model, but the "Endereco" model is not associated and I cannot get the corresponing data.

Any help is appreciated!

Answer 1

I figured out the problem:

In the "app/model/Pessoa.js file" I simply had to replace

hasOne: {model: 'Endereco', foreignKey: 'pessoaId'}

to

hasOne: {model: 'Aap.model.Endereco', associationKey: 'endereco', foreignKey: 'pessoaId'}

Now, the associaiton is working correctly.

The problem the associationKey, which is the property to read the association from. As explained in the ExtJS dcumentation the associationKey is by default the name of the associated moel.

In the first example (the one that worked), this worked well. The associationKey was correspondinly to the model name "Endereco" set to "endereco" by default.

In the second example (the one that did not work), however, the default associationKey did not find any property in the data (app/model/Pessoa.js) with the same name. The associationKey was correspondinly to the model name "Aap.model.Endereco" set to "aap.model.endereco" by default.

The associationKey had therefore to be defined explicitely as "endereco" in order to solve the problem.