title: ExtJS 4.1 - Returning Associated Data in Model.Save() Response
body: <p>I am curious as to why the record contained in the result set of a <code>Model.save()</code> response does not properly return updated associated data, despite the updated data being contained in the server response...</p>
  
  <p><strong>Example Model &amp; Store Definition:</strong></p>
  
  <pre><code>Ext.define("App.model.test.Parent",{
      extend: 'Ext.data.Model',
      requires: ['App.model.test.Child'],
      fields: [
              {name: 'id', type: 'int' },
              {name: 'name', type: 'string'},
              {name: 'kids', type: 'auto', defaultValue: []}
      ],
      idProperty: 'id',
  
      hasMany: [{
              foreignKey: 'parent_id',
              model: 'App.model.test.Child', 
              associationKey: 'kids',
              name: 'getKids'   
      }],
  
      proxy: {
          type: 'ajax',
          api : {
              create: '/service/test/create/format/json',
              read : '/service/test/read/format/json',
              update : '/service/test/update/format/json'
          },
  
          reader: {
              idProperty      : 'id',
              type            : 'json',
              root            : 'data',        
              successProperty : 'success',       
              messageProperty : 'message'
          },
  
          writer: {
              type            : 'json',
              writeAllFields  : true
          }
      }
  });
  
  Ext.define("App.model.test.Child",{
      extend: 'Ext.data.Model',
      fields: [
          {name: 'id', type: 'int' },
          {name: 'name', type: 'string'},
          {name: 'parent_id', type: 'int'}
      ]
  });
  
  Ext.define("App.store.test.Simpson",{
      storeId: 'TheSimpsons',
      extend: 'Ext.data.Store',
      model : 'App.model.test.Parent',
      autoLoad: true,
      autoSync: false
  });
  </code></pre>
  
  <p>The application server response to the proxy's <code>READ</code> request with a single model, and its associated data. This is all working hunky dory!</p>
  
  <p><strong>Server Response to READ Request</strong>  </p>
  
  <pre><code>{
  "data":{
      "id":1,
      "name":"Homer Simpson",
      "children":{
          "1":{
              "id":1,
              "name":"Bart Simpson"
          },
          "2":{
              "id":2,
              "name":"Lisa Simpson"
          },
          "3":{
              "id":3,
              "name":"Maggie Simpson"
          }
      }
  },
  "success":true,
  "message":null
  }
  </code></pre>
  
  <p><em>Thus far, everything is working according to plan...</em></p>
  
  <pre><code>store = Ext.create("App.store.test.Simpson");
  homer = store.getById(1);
  kids  = homer.getKids().getRange();
  console.log("The Simpson Kids", kids);  // [&gt;constructor, &gt;constructor, &gt;constructor]
  </code></pre>
  
  <p><strong>THE UNDESIRED BEHAVIOR BEGINS WITH SAVE AND UPDATE REQUESTS</strong></p>
  
  <p>Here is my test response for the <strong>UPDATE</strong> Request...</p>
  
  <pre><code>/** Server UPDATE Response */
  {
  "data":{
      "id":1,
      "name":"SAVED Homer Simpson",
      "kids":[{
          "id":1,
          "name":"SAVED Bart Simpson",
          "parent_id":1
      },{
          "id":2,
          "name":"SAVED Lisa Simpson",
          "parent_id":1
      },{
          "id":3,
          "name":"SAVED Maggie Simpson",
          "parent_id":1
      }]
  },
  "success":true,
  "message":null
  }
  
  
  /** Will call proxy UPDATE, response is above */
  homer.save({
      success: function(rec, op){
          var savedRec = op.getRecords().pop(),
              kidNames = '';
          console.log(savedRec.get('name')); // SAVED Homer Simpson = CORRECT!
          Ext.each(savedRec.getKids().getRange(), function(kid){
              kidNames += kid.get('name') + ", ";
          });
          console.log(kids); 
          //Outputs: Bart Simpson, Lisa Simpson, Maggie Simpson = WRONG!!
      }
  })
  </code></pre>
  
  <p>I notice that if I inspect the record returned by the server, the generated Association Store (i.e., <code>getKidsStore</code>) the contained records are the original records, i.e., they do not have "SAVED" in their name. The <code>kids</code> property of the returned record, however, DOES indeed contain the correct data.</p>
  
  <p>If I understand the issue correctly, it is that the <code>Ext.data.reader.Reader</code> does not correctly update the associated store with the associated data contained in the <code>.save()</code> response. If so, in my opinion, this is very unintuitive as I would expect the same behavior as the reader that handles the <code>store.load()</code> request and populates the generated association stores to begin with.</p>
  
  <p>Can anyone point me in the right direction in achieving the behavior I'm after?</p>
  
  <p><strong>Disclaimer:</strong> Same question was asked here: <a href="https://stackoverflow.com/questions/13828092/extjs-4-load-nested-data-on-record-save">ExtJs 4 - Load nested data on record save</a> but with no response. I feel my question to be a bit more thorough..</p>
  
  <p><strong>EDIT:</strong> I have posted this question over on the Sencha forums: <a href="http://www.sencha.com/forum/showthread.php?270336-Associated-Data-in-Model.save()-Response" rel="nofollow noreferrer">http://www.sencha.com/forum/showthread.php?270336-Associated-Data-in-Model.save()-Response</a></p>
  
  <p><strong>EDIT (8/23/13):</strong> I re-wrote this post with a COMPLETE example, as well as additional findings...</p>