model - Extjs4 hasMany() relationship not loading from Store's 'data' property

Question

The data property of my Extjs4 Store class describes an object hierarchy. I put this as the data property of my store because the data is static; there's no need to make an extra call to the server to populate the store. I've done this before, but this time my hasMany relationship isn't getting populated. I've tried a variety of ways to fix this, but I'm stumped. Would you take a look at it to see if I'm missing something?

The relationship of objects is: MarineForm has MarineFormSections which has MarineFormFields

The store with it's data property:

Ext.define('MAP.store.MarineFormStore', {
    extend: 'Ext.data.Store',
    model: 'MAP.model.MarineForm',
    data:[
        {
            species:'Mackerel',
            gear:null,
            sections:[
                {
                    name:'General Info',
                    formFields:[
                        {
                            xtype:'textfield',
                            name:'firstField',
                            allowBlank:false,
                            fieldLabel:'First Field'
                        }
                    ]
                }
            ]
        }
    ]

});

The root model:

Ext.define('MAP.model.MarineForm', {
    extend: 'Ext.data.Model',

    fields: [
        {name: 'species', type: 'string'},
        {name: 'gear', type: 'string'}
    ],

    hasMany: {
        model: 'MAP.model.MarineFormSection',
        name: 'sections'
    }

});

The hasMany class:

Ext.define('MAP.model.MarineFormSection', {
    extend: 'Ext.data.Model',

    fields: [
        'id',
        {name: 'name', type: 'string'}
    ],

    hasMany: {
        model: 'MAP.model.MarineFormField',
        name: 'formFields'
    }

});

the hasMany's hasMany class (third layer nested)

Ext.define('MAP.model.MarineFormField', {
    extend: 'Ext.data.Model',

    fields: [
        'name',
        {name:'allowBlank', type:'boolean'},
        'fieldLabel',
        'xtype',
        //next ones are for comboboxes. Not used all the time. -jg
        'store',
        'valueField',
        'displayField'
    ]
});

Here's the output from querying the store within Chrome:

rootStore = Ext.getStore('MarineFormStore') // -> the store
sections = rootStore.getAt(0).sections() // -> hasMany store
sections.getCount() // -> 0

I've tried:

1. Removing the MarineFormField hasMany block for MarineFormFields
2. Adding an id to the MarineFormField
3. Triple checking for any typos in the the root store's data field

Thanks for taking the time!

Answer 1

It appear to me that all you are missing is this in your store config (or unlikely you just forgot to load the store):

proxy: {
    type: 'memory',
    reader: {
        type: 'json',
    }
},    

This JsFiddle is pretty much your code with this change included and it seems to work just fine.