Question

I’ve started creating a Sencha Touch 2 app that has two models defined, Change and Configuration. A Change belongsTo a Configuration. Both of the models also have a store setup. On the Changes store I have a proxy setup to request data that comes back in JSON format. The JSON data has a Change with a nested configuration. The Change loads just fine but when I try and get the associated Configuration from the Change instance it isn’t working.

I’ve defined the models like this:

Change model:

Ext.define('Changes.model.Change', {
    extend: 'Ext.data.Model',
    xtype: 'changemodel',

    config: {
        fields: [ 
            {name:'id', type:'int'},
            {name:'changeId', type:'string'},
            {name:'briefDescription', type:'string'},
            {name:'configuration_id', type:'int'}
        ],
        associations: [{
            type:'belongsTo', 
            model:'Changes.model.Configuration',
            primaryKey: 'id',
            foreignKey: 'configuration_id',
            associationKey: 'configurations'
        }],
    },
});

Configuration Model:

Ext.define('Changes.model.Configuration', {
    extend: 'Ext.data.Model',
    xtype: 'configurationmodel',
    config: {
        fields: [
             { name: 'id', type: 'int'},
             { name: 'longName', type: 'string' },
             { name: 'ciName', type: 'string' },
            ],
        hasMany: {model: 'Change', name: 'changes'}
    }
});

Each model has a store.

Changes store:

Ext.define('Changes.store.Changes', {
    extend: 'Ext.data.Store',
    requires: 'Changes.model.Change',
    config: {
        model: 'Changes.model.Change',  
        proxy: {
            type: 'ajax',
            url: 'services/changes.php',
            reader: {
                type: 'json',
                rootProperty: 'changes'
            }
        },
        sorters: [{ property: 'briefDescription', direction: 'ASC'}],
    }
});

Configurations store:

Ext.define('Changes.store.Configurations', {
    extend: 'Ext.data.Store',
    requires: ['Ext.data.proxy.LocalStorage'],
    config: {
        model: 'Changes.model.Configuration',
        grouper: {
                sortProperty: "ciName",
                direction: "DESC",
                groupFn: function (record) {
                    return record.get('ciName')[0];
                }
           },
        proxy: {
            type: 'ajax',
            url: 'services/configurationItems.php',
            reader: {
                type: 'json',
                rootProperty: 'configurationItems'
            }
        }
    }
});

My JSON that is being returned from services/changes.php looks like this:

{
    "success": true,
    "changes": [
        {
            "id": 1,
            "changeId": "XYZ19178263",
            "briefDescription": "Loaded from Proxy",
            "configuration_id": 3,
            "configurations": [
                {
                    "id": "3",
                    "longName": "999-99_-_windows_7_desktop.Computer.Windows",
                    "ciName": "999-99_-_windows_7_desktop"
                }
            ]
        }
    ]
}

In the browser’s console I can issue the following commands:

Changes.myStore = Ext.getStore('Changes');
Changes.myStore.load();
Changes.record = Changes.myStore.findRecord('id', '1');
Changes.record.getAssociatedData()

The last command will return an object with a Configuration object inside but all of the field values show null except for id which appears to be set to a random value:

Object
Configuration: Object
ciName: null
id: "ext-record-11"
longName: null

Can anyone see why the nested Configuration instance in my JSON isn’t being saved? And should the nested Configuration instance in the JSON be added to the Configurations store automatically?

Answer 1

Sadly this just doesn’t work. Appears to be a shortcoming of the framework. You can’t load and save associated (aggregated/nested) objects. You need to flatten out your structure and then associate objects in code yourself.

So for example… your JSON would then be…

{
"success": true,
"changes": [
    {
        "id": 1,
        "changeId": "XYZ19178263",
        "briefDescription": "Loaded from Proxy"
    }
]

}

And a second JSON file/response as follows:

    {

    "success": true,
    "configurations": [
                {
                    "id": "3",
                    "longName": "999-99_-_windows_7_desktop.Computer.Windows",
                    "ciName": "999-99_-_windows_7_desktop",
                    "change_id": 1
                }
            ]
    }