title: Load and save nested data in ExtJS 4
body: <p>I have two models: Book belongsTo Author. Let's survey the author data sent together with book data on its way from server to ExtJs and back. Server sends following nested data to ExtJs:</p>
  
  <pre><code>{
    success : true,
    data: {
      id: '23',
      name: 'JavaScript - The definitive guide'
      author: {                                  // &lt;&lt;-- nested author data
          id: '45',
          name: 'David Flanagan',
      }
    }
  }
  </code></pre>
  
  <p>On side of ExtJs the data are treated by following model:</p>
  
  <pre><code>Ext.define('My.models.Book', {
      extend: 'Ext.data.Model',
      idProperty: 'id',
  
      fields: [
          'id',, 
          'name',
          {name: 'author_id', mapping: 'Author.id'}, // &lt;&lt;-- flat author data
      ],
  
      proxy: {
          type: 'ajax',
          api: {
              read: 'My/Books/index',
              create: 'My/Books/create',
              update: 'My/Books/update',
              destroy: 'My/Books/delete'
          },
          reader: {
              type: 'json',
              root: 'data',
          },
          writer: {
              type: 'json',
              root: 'data',
          },
      },
  
      associatinons: [{
          type: 'belongsTo', 
          model: 'My.models.Author', 
          associationKey: 'Author', 
      }]    
  });
  </code></pre>
  
  <p>Thanks to mapping <code>Author.id</code> on <code>author_id</code> field of <code>Book</code> model (<code>{name: 'author_id', mapping: 'Author.id'}</code>) I am able to load the data of author to following form designed to edit book data:</p>
  
  <pre><code>Ext.define('My.views.books.Form', {
      extend: 'Ext.form.Panel',
      initComponent: function () {
          var me = this;
          me.items = [{
              xtype: 'container',
              layout:'anchor',
              defaults:{
                  anchor: '95%'
              },
              items:[{
                  xtype: 'textfield',
                  fieldLabel: 'Book title',
                  name: 'name'
              },{
                  xtype: 'combo',
                  fieldLabel: 'Author',
                  name: 'author_id',            // &lt;&lt;-- flat author data
                  store: ...
              }]
          }];    
          me.buttons = [{
              text: 'Save',
              scope: me,
              handler: me.onSave
          }];
          me.callParent(arguments);
      },
      ...
  });
  </code></pre>
  
  <p>Of course there is a model dedicated exclusively to author but when I need to load book and author data into one form at once, I do not see (for the moment) other possibility as the one shown above (Of course show me it, please, if there is some better solution).</p>
  
  <p><strong>The problem comes now:</strong> I will choose some other author from combo and I will save the form. As the book record get dirty (<code>author_id</code> appears now as a <code>Book</code> model field), there will be raised a request to <code>'My/Books/update'</code> URL (this is quite ok, I'am editing book) with following data sent to server:</p>
  
  <pre><code>{
    data: {
      id: '23',
      name: 'JavaScript - The definitive guide',
      author_id: '78'              // &lt;&lt;-- flat author data
    }
  }
  </code></pre>
  
  <p>Data coming back to server are not the in the same structure as they have been sent to ExtJs and must make some kind of translations like: </p>
  
  <pre><code>$data['Author']['id'] = @$data['author_id'];
  unset($data['author_id']);
  </code></pre>
  
  <p>I am asking: <strong>Is it possible to treat data by ExtJs form in such a way that they will get back to server just in the same structure as they came from server? HOW?</strong></p>
  
  <p><em>This question was already somehow discussed <a href="https://stackoverflow.com/questions/14634577/save-nested-form-data-back-to-server-in-extjs">here</a>, <a href="https://stackoverflow.com/questions/8601671/extjs-4-associations-and-store-save">here</a> and <a href="https://stackoverflow.com/questions/13828092/extjs-4-load-nested-data-on-record-save">here</a>, but neither of those discussions answered it definitely.</em></p>
  
  <p>Thank in advance for help! :)</p>