HasMany association is not working (with copy and past code example)

[LauXjpn]

I am trying to load a json object with nestend objects into a store. All associations except one are working. The one that does not work is a hasMany association.

I put together a simple case that demonstrates the problem:
The general json model has one object called 'common'. It contains two arrays: foos (which contains objects of Foo) and bars (which contains objects of Bar). Also note that every Foo object can be referenced by many Bar objects. This is the association that is not working.
I implemented the following two associations: Bar belongsTo Foo; Foo hasMany Bar. The belongsTo does work correctly, the hasMany returns an empty store.
The first time I am accessing store.first().foos().first().bars() a new internal store is created with zero items. Accessing store.first().bars() retuns the correct store with all its items.

I have a complete copy and past example of this case to make it easier to understand my problem. The code logs some objects to the console.

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false
});


Ext.define('Common', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'id',
            'someProp'
        ],
        hasMany: [
            'Foo',
            'Bar'
        ]
    }
});


Ext.define('Foo', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'id',
            'someProp',
            'common_id'
        ],
        belongsTo: 'Common',
        hasMany: 'Bar' // this does not work
    }
});


Ext.define('Bar', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'id',
            'someProp',
            'foo_id',
            'common_id'
        ],
        belongsTo: [
            'Common',
            'Foo'
        ]
    }
});


Ext.application({
    name: 'AssocTest03',
    launch: function() {
        var store = Ext.create('Ext.data.Store', {
            model: 'Common',
            data: {
                'id': '1',
                'someProp': 'common',
                'foos': [
                    {
                        'id': '11',
                        'someProp': 'foo',
                        'common_id':'1'
                    },
                    {
                        'id': '12',
                        'someProp': 'foo',
                        'common_id': '1'
                    }
                ],
                'bars': [
                    {
                        'id': '21',
                        'someProp': 'bar',
                        'foo_id': '11',
                        'common_id': '1'
                    },
                    {
                        'id': '22',
                        'someProp': 'bar',
                        'foo_id': '12',
                        'common_id': '1'
                    }
                ]
            }
        });


        console.log(store.first().bars().first().getCommon());
        console.log(store.first().bars().first().getFoo());
        console.log(store.first().foos());
        
        // This does not work. store.first().foos().first().bars() creates a new store
        // with zero items.
        console.log(store.first().foos().first().bars().first());
    }
});

This is a simplified model of some real world code I need to implement in which i am retrieving the far more complex JSON object using AJAX.
Can anybody tell me why the foo-hasMany-bar association is not working and what I need to tweak to get it up and running?

[mitchellsimoens]

Have you tried remote loading?