title: Setting data from a store to a form panel which has a grid in extjs 4.2
body: <p>I'm trying to set values for the components in a form panel and below is my code.</p>
  
  <p>Form Panel with grid:</p>
  
  <pre><code>Ext.define('MyApp.view.MyForm', {
      extend: 'Ext.form.Panel',
  
      height: 436,
      width: 754,
      layout: {
          columns: 4,
          type: 'table'
      },
      bodyPadding: 10,
      title: 'My Form',
  
      initComponent: function() {
          var me = this;
  
          Ext.applyIf(me, {
              items: [
                  {
                      xtype: 'displayfield',
                      colspan: 4,
                      fieldLabel: '',
                      value: 'Display Field'
                  },
                  {
                      xtype: 'displayfield',
                      colspan: 2,
                      margin: '0 50 0 0 ',
                      fieldLabel: 'Age',
                      labelAlign: 'top',
                      value: 'Display Field'
                  },
                  {
                      xtype: 'displayfield',
                      colspan: 2,
                      fieldLabel: 'Country',
                      labelAlign: 'top',
                      value: 'Display Field'
                  },
                  {
                      xtype: 'gridpanel',
                      colspan: 4,
                      header: false,
                      title: 'My Grid Panel',
                      store: 'MyJsonStore',
                      columns: [
                          {
                              xtype: 'gridcolumn',
                              dataIndex: 'DeptName',
                              text: 'Dept Name'
                          },
                          {
                              xtype: 'gridcolumn',
                              dataIndex: 'DeptId',
                              text: 'Dept ID'
                          }
                      ]
                  }
              ]
          });
  
          me.callParent(arguments);
      }
  
  });
  </code></pre>
  
  <p>Models:</p>
  
  <pre><code>Ext.define('MyApp.model.EmpModel', {
      extend: 'Ext.data.Model',
  
      uses: [
          'MyApp.model.DeptModel'
      ],
  
      fields: [
          {
              name: 'Name'
          },
          {
              name: 'Age'
          },
          {
              name: 'Country'
          },
          {
              name: 'Dept'
          }
      ],
  
      hasMany: {
          associationKey: 'Dept',
          model: 'MyApp.model.DeptModel'
      }
  });
  
  Ext.define('MyApp.model.DeptModel', {
      extend: 'Ext.data.Model',
  
      uses: [
          'MyApp.model.EmpModel'
      ],
  
      fields: [
          {
              name: 'DeptName'
          },
          {
              name: 'DeptId'
          }
      ],
  
      belongsTo: {
          associationKey: 'Dept',
          model: 'MyApp.model.EmpModel'
      }
  });
  </code></pre>
  
  <p>Store:</p>
  
  <pre><code>Ext.define('MyApp.store.MyJsonStore', {
      extend: 'Ext.data.Store',
  
      requires: [
          'MyApp.model.EmpModel'
      ],
  
      constructor: function(cfg) {
          var me = this;
          cfg = cfg || {};
          me.callParent([Ext.apply({
              model: 'MyApp.model.EmpModel',
              storeId: 'MyJsonStore',
              data: {
                  EmpDet: [
                      {
                          EmpName: 'Kart',
                          Age: '29',
                          Dept: [
                              {
                                  DeptName: 'Dev',
                                  DeptId: '1000'
                              }
                          ]
                      }
                  ]
              },
              proxy: {
                  type: 'ajax',
                  url: 'data/empDet.json',
                  reader: {
                      type: 'json'
                  }
              }
          }, cfg)]);
      }
  });
  </code></pre>
  
  <p>Json data:</p>
  
  <pre><code>{
      "EmpDet": [
          {
              "EmpName": "Kart",
              "Age": "29",
              "Dept": [
                  {
                      "DeptName": "Dev",
                      "DeptId": "1000"
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>Questions:</p>
  
  <p>1)  I had left the value of the component as "Display Field" itself because if I remove this value the width of the grid below decreases. I feel this is because of the table layout and colspans. Is there any other best way to display labels without any alignment change on value load.</p>
  
  <p>2) I'm trying to set the value for the display field. I tried to do it with the <code>afterrender</code> event but the problem is that it throws a undefined error at <code>Ext.getStore('MyJsonStore').getAt(0)</code>. I found that this works fine if I write the same in the click event of a button. So, I feel that the store is not loaded when I try the <code>afterrender</code> event of the displayfield (autoload for store is set to true). Is there an alternative for afterrender event of a component. Also, Is there a way to set all the field values at a stretch instead of setting every component one by one?</p>
  
  <p>3) Also I find it difficult to do the association properly. I'm using Sencha Architect 2.2 and when I go the data index of the grid, I'm not able to get the "DeptName" and "DeptId" in the dropdown.</p>
  
  <p>Please help.</p>