Load JSON in Ext store, associations missing

Question

I'm using Ext 4.1. I have some issues with loading json data with associations. The flat data gets loaded perfectly, only the 'hasMany' doesn't work. (if loaded there nowhere to be found). If a record is loaded I want to be able to get the 2 stores of Attendee's and the 1 store of documents.

I can also change the JSON format to a better format (if you have suggestions let me know!)

I have this json data.

This is my first model:

Ext.define('App.model.package.LabVisit', {
    extend: 'Ext.data.Model',
    requires: [
        'App.model.package.Attendee',
        'App.model.package.Document'
    ],
    idProperty: 'labVisitID',

    fields: [
        {
            mapping: 'lab_visit_id',
            name: 'labVisitID',
            type: 'int'
        },
        {
            mapping: 'lab_id',
            name: 'labID',
            type: 'int'
        },
        ... some more irrelevant...
        {
            mapping: 'comments',
            name: 'comments'
        },
        {
            name: 'upddate'
        }
    ],
    hasMany: [
        /* edit: added foreignKey (also tried with: lab_visit_id) */
        { model: 'package.Attendee', name: 'attendeeLabList', associationKey:'attendee_lab', foreignKey: 'labVisitId' },
        { model: 'package.Attendee', name: 'attendeeEmpList', associationKey:'attendee_emp', foreignKey: 'labVisitId' }
        { model: 'package.Document', name: 'document', associationKey:'document' },
    ]

});

I have following attendee model:

Ext.define('App.model.package.Attendee', {
    extend: 'Ext.data.Model',

    fields: [
        /* edit: added this field */
        {
            mapping: 'lab_visit_id',
            name: 'labVisitId'
        },
        {
            mapping: 'attendee_id',
            name: 'AttendeeID'
        },
        {
            mapping: 'first_name',
            name: 'firstName'
        },
        {
            mapping: 'last_name',
            name: 'lastName'
        },
        {
            name: 'email'
        }
    ]
});

following document model:

Ext.define('App.model.package.Document', {
    extend: 'Ext.data.Model',

    fields: [
        {
            mapping: 'document_id',
            name: 'docID'
        },
        {
            mapping: 'document_name',
            name: 'docName'
        },
        {
            mapping: 'document_mimetype',
            name: 'mimeType'
        },
        {
            name: 'uploadID'
        }
    ]
});

Finally my store:

Ext.define('App.store.package.LabVisit', {
    extend: 'Ext.data.JsonStore',
    requires: [
        'App.model.package.LabVisit'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};

        me.callParent([Ext.merge({
            storeId: 'labVisitStore',
            model: 'App.model.package.LabVisit',
            remoteSort: true,
            proxy: {
                type: 'ajax',
                api: {
                    read: API_URLS.getVisitList //url to the json
                },
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            }
        }, cfg)]);
    }
});

Edit: I've added the foreign key in the model and added it to the hasMany

Still no difference. This is my output:

the first record in the store

I also find it a strange: If it's broken I expect an exception. And there are 2 mysterious stores always present but I don't have a clue why or what's the purpose.

I believe that, like many others, you are victim of the confusing nature of associations in ExtJS 4. One clear problem with your code is that the package.Attendee model doesn't have a (foreign) key linking it with package.LabVisit. If you look at the docs example, Product has user_id field to complete the has many association User has to it. In other words, your associated model is invalid and wouldn't work regardless the loading. — Izhaki
@Izhaki I believe I am... That's the thing I'm struggling with from the beginning. So you say it will (only) work when I add a belongsTo and add a labVisit_id to the package.Attendee model... — VDP
No, you don't need the belongsTo, you just need labVisit_id in the package.Attendee model. But that raises the question whether an Attendee can only be in one labVisit - it seems to me that There's a list of people and you are trying to associated them with labvisits. So a many-to-many might be the way to go here, but it's not part of ExtJS although can be easily implemented using an association store. — Izhaki
@Izhaki Theoretically you're right but this is coming from the backend I just want a store with childstores. The many to many is overkill. But I can't get my head around the association stuff in ExtJS 4.x. I've also tried using a converter returning the child store. Not the best solution but I really need to get it working. — VDP
Just so I stand corrected - it turns out you don't have to define user_id; I've created a jsfiddle of some docs code and it works just fine. — Izhaki

VDP VDP · Accepted Answer · 2012-08-20T09:35:34

The problem was in this part:

hasMany: [
    { model: 'package.Attendee', name: 'attendeeLabList', associationKey:'attendee_lab' },
    { model: 'package.Attendee', name: 'attendeeEmpList', associationKey:'attendee_emp' },
    { model: 'package.Document', name: 'document', associationKey:'document' },
]

@Izhaki helped me a lot. Thanx! Especially with the fiddle. I started there and begun with switching the code with my code piece by piece. Until I saw the model was the problem.

models should be defined like this: App.model.package.Attendee

I think it's sad that the framework doesn't show a significant error/warning if a model isn't recognised/doesn't excist/isn't supplied... But meh, it works now.

Load JSON in Ext store, associations missing

1 Answers