title: Sencha touch 2 load store and associated store with nested JSON
body: <p>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.</p>
  
  <p>I've defined the models like this:</p>
  
  <p>Change model:</p>
  
  <pre><code>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'
          }],
      },
  });
  </code></pre>
  
  <p>Configuration Model:</p>
  
  <pre><code>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'}
      }
  });
  </code></pre>
  
  <p>Each model has a store.</p>
  
  <p>Changes store:</p>
  
  <pre><code>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'}],
      }
  });
  </code></pre>
  
  <p>Configurations store:</p>
  
  <pre><code>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'
              }
          }
      }
  });
  </code></pre>
  
  <p>My JSON that is being returned from <code>services/changes.php</code> looks like this:</p>
  
  <pre><code>{
      "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"
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>In the browser's console I can issue the following commands:</p>
  
  <pre><code>Changes.myStore = Ext.getStore('Changes');
  Changes.myStore.load();
  Changes.record = Changes.myStore.findRecord('id', '1');
  Changes.record.getAssociatedData()
  </code></pre>
  
  <p>The last command will return an object with a Configuration object inside but all of the field values show <code>null</code> except for <code>id</code> which appears to be set to a random value:</p>
  
  <pre><code>Object
  Configuration: Object
  ciName: null
  id: "ext-record-11"
  longName: null
  </code></pre>
  
  <p>Can anyone see why the nested <code>Configuration</code> instance in my JSON isn't being saved? And should the nested <code>Configuration</code> instance in the JSON be added to the <code>Configurations</code> store automatically?</p>