Extjs 5, data model association & load nested data

Question

trying to make this work....

I want to load nested data on two object model

Ext.application({
name : 'MyApp',

launch : function() {


    Ext.define('MyApp.model.Address', {
        extend: 'Ext.data.Model',

        entityName: 'Address',

        fields: [ 

            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'addressLine',
                type: 'string'
            },
            {
                name: 'city',
                type: 'string'
            },
            {
                name: 'created',
                type: 'date',
                dateFormat: 'time',
                persist: false
            }
        ]
    });


    Ext.define('MyApp.model.User', {
        extend: 'Ext.data.Model',

        entityName: 'User',

        fields: [ 
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'address',
                reference: 'Address'
            },
            {
                name: 'name',
                type: 'string'
            },
            {
                name: 'lastname',
                type: 'string'
            },
            {
                name: 'created',
                type: 'date',
                dateFormat: 'time',
                persist: false
            }
        ]
    });


    var user = new MyApp.model.User({
        "id": 1,
        "name": "Pedro",
        "lastname": "Carbonell",
        "address": {
            "id": 1,
            "addressLine": "Bailen 22",
            "city": "Barcelona",
            "created": 1420668866000
        },
        "created": 1420668866000
    });        

    console.info(user);
    console.info(user.getAddress());

}});

It's result on no error when created the user, but when I access to associated data via user.getAddress() it returned an exception:

 Uncaught Error: The model ID configured in data ("[object Object]") has been rejected by the int field converter for the id fieldext-all-debug.js

Try to define proxy like memory or localstorage on model definitions, but the result it is the same.

Ext fiddle: https://fiddle.sencha.com/#fiddle/h2d

Any help will be appreciated!

score 3 · Accepted Answer · answered Jan 26 '15 at 19:45

Solved, but only find this solution: when use loadRawData...

    var store = new Ext.data.Store({
        model: MyApp.model.User
    });

    store.loadRawData({
        "id": 1,
        "name": "Pedro",
        "lastname": "Carbonell",
        "address": {
            "id": 1,
            "addressLine": "Bailen 22",
            "city": "Barcelona",
            "created": 1420668866000
        },
        "created": 1420668866000
    });        

    console.info(store.first());
    console.info(store.first().getAddress());

sample at this new fiddle: https://fiddle.sencha.com/#fiddle/h4e

you'r right, ext is a bit flaky, very....

score 1 · Answer 2 · answered Jan 25 '15 at 21:40

I've been playing around with the code in your fiddle and not been able to get the association working the official way as of yet.

I simulated the functionality using this code:

Ext.define('MyApp.model.User', {
        extend: 'Ext.data.Model',

        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'name',
            type: 'string'
        }, {
            name: 'lastname',
            type: 'string'
        }, {
            name: 'created',
            type: 'date',
            dateFormat: 'time',
            persist: false
        }],

        getAddress: function() {
            if ('undefined' === this.data.address) {
                return null;
            }
            return Ext.create('Address', this.data.address);
        }
    });

Basically I've removed the association and created a custom function to create a model record based off of the raw data passed in, You could also return a new, empty model if the address data does not exist instead of null, I used null as it's easier to determine whether you have a valid address record or not.

As already mentioned - this is not the official way to do this, I will have another play around with the fiddle and post a better solution once I find it, this may help in the meantime.

Yes, thanks so much, this solution work for me, but I would like to underestand why the offical way didn't work. — Manu, Jan 26 '15 at 15:40
I'm still investigating that, To be honest, ExtJs associations are known to be a bit flaky or at least difficult to get used to, just look at all the posts on [here](http://stackoverflow.com/search?q=extjs+associations) about them. I will update the answer when I have more information. It doesn't seem to like the fact you are using `id:` on both, I changed the address one to `addressId` and it got past that error but still didn't load the data. — Scriptable, Jan 26 '15 at 15:46
Solved, but only when I use `loadRawData`... you can see at this new fiddle: [https://fiddle.sencha.com/#fiddle/h4e](https://fiddle.sencha.com/#fiddle/h4e)... you'r right, ext is a bit flaky, very.... — Manu, Jan 26 '15 at 16:58

score 1 · Answer 3 · answered Jan 27 '15 at 17:43

Using the original code, I made a few modifications and now it appears to be working.

Ext.application({
name : 'MyApp',

launch : function() {


    Ext.define('MyApp.model.Address', {
        extend: 'Ext.data.Model',

        //entityName: 'Address',

        fields: [ 

            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'addressLine',
                type: 'string'
            },
            {
                name: 'city',
                type: 'string'
            },
            {
                name: 'created',
                type: 'date',
                dateFormat: 'time',
                persist: false
            }
        ],

        hasMany: 'User'
    });


    Ext.define('MyApp.model.User', {
        extend: 'Ext.data.Model',

        //entityName: 'User',

        fields: [ 
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'name',
                type: 'string'
            },
            {
                name: 'lastname',
                type: 'string'
            },
            {
                name: 'created',
                type: 'date',
                dateFormat: 'time',
                persist: false
            }
        ], 

        hasMany: { model: 'Address', name: 'Address' }
    });


    var user = new MyApp.model.User({
        "id": 1,
        "name": "Pedro",
        "lastname": "Carbonell",
        "address": {
            "id": 1,
            "addressLine": "Bailen 22",
            "city": "Barcelona",
            "created": 1420668866000
        },
        "created": 1420668866000
    });        

    console.info(user);
    console.info(user.data.address);

}
});

It seems not to work, this code don't generate any association... with 'user.data.address' you are accessing the original object that didn't parse. Lookup to user.data.address.created (it didn't parse to date object like user.get('created').... no association generated (you can not access vía user.getAdress().get('created')...). Thanks for trying. — Manu, Jan 28 '15 at 08:26

score 1 · Answer 4 · answered Apr 01 '15 at 21:46

Is this the sort of thing you're after? I set Address manually on the User model. Not ideal but it's interpreted correctly as a record then.

    Ext.define('MyApp.model.Address', {
        extend: 'Ext.data.Model',

        entityName: 'Address',

        fields: [ 

            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'addressLine',
                type: 'string'
            },
            {
                name: 'city',
                type: 'string'
            },
            {
                name: 'created',
                type: 'date',
                dateFormat: 'time',
                persist: false
            }
        ]
    });


    Ext.define('MyApp.model.User', {
        extend: 'Ext.data.Model',

        entityName: 'User',

        fields: [ 
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'addressId',
                reference: 'Address'
            },
            {
                name: 'name',
                type: 'string'
            },
            {
                name: 'lastname',
                type: 'string'
            },
            {
                name: 'created',
                type: 'date',
                dateFormat: 'time',
                persist: false
            }
        ]
    });


    var user = new MyApp.model.User({
        "id": 1,
        "name": "Pedro",
        "lastname": "Carbonell",
        "created": 1420668866000
    });        

    var addr  = new MyApp.model.Address({
            "id": 1,
            "addressLine": "Bailen 22",
            "city": "Barcelona",
            "created": 1420668866000
    });
    user.setAddress(addr);
    console.info(user);
    console.info(user.getAddress());

Extjs 5, data model association & load nested data

4 Answers4

Linked