Geek Answers Handbook

Extjs 5, data model association and nested data loading

trying to make this work ....

I want to load nested data into two object models

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

}});

This does not lead to an error when creating the user, but when I access the related data through user.getAddress (), it returns 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 defining proxy memory as memory or localstorage for model definitions, but the result will be the same.

External script: https://fiddle.sencha.com/#fiddle/h2d

Any help would be appreciated!

+4
source share
4 answers

Solved, but only find this solution: when using 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());

: https://fiddle.sencha.com/#fiddle/h4e

, ext , ....

+3

.

:

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

, , . , , null, null, , .

- , , , .

+1

Using the source code, I made a few changes, and now it works.

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

}
});
+1
source

This is what you need? I set the address manually in the user model. Not perfect, but it is correctly interpreted as a record.

    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());
+1
source

More articles:


All Articles