title: Extjs: How to populate form with values from grid row selection
body: <p>I have a form and a grid. I'm trying to allow the user to select one of the rows in the grid then click a button in order to load the data from the row into the form.</p>
  
  <p>Here is my view so far:</p>
  
  <pre><code>Ext.define('Project.view.main.Main', {
      extend: 'Ext.panel.Panel',
      autoScroll: true,
      height: 600,
      layout: 'border',
      bodyBorder: false,
      defaults: {
          collapsible: true,
          split: true,
          bodyPadding: 10
      },
      initComponent: function () {
          this.items = [
              {
                  collapsible: false,
                  region: 'center',
                  margin: '5 0 0 0',
                  title: 'Record Event',
                  id: 'SaveEvent',
                  bodyPadding: 5,
                  layout: 'column',
                  items: [{
                      xtype: 'fieldset',
                      title: 'Event Information',
                      layout: 'anchor',
                      defaults: {
                          anchor: '100%'
                      },
                      items: [{
                          xtype: 'fieldcontainer',
                          fieldLabel: 'Event',
                          layout: 'hbox',
                          defaults: {
                              hideLabel: 'true'
                          },
                          items: [{
                              xtype: 'combobox',
                              forceSelection: true,
                              name: 'eventTypeId',
                              width: 300,
                              store: {
                                  type: 'events'
                              },
                              valueField: 'eventTypeId',
                              tpl: Ext.create('Ext.XTemplate',
                                  '&lt;ul class="x-list-plain"&gt;&lt;tpl for="."&gt;',
                                  '&lt;li role="option" class="x-boundlist-item"&gt;{eventType}/{detail}&lt;/li&gt;',
                                  '&lt;/tpl&gt;&lt;/ul&gt;'
                              ),
                              // template for the content inside text field
                              displayTpl: Ext.create('Ext.XTemplate',
                                  '&lt;tpl for="."&gt;',
                                  '{eventType}/{detail}',
                                  '&lt;/tpl&gt;'
                              ),
                              allowBlank: false
                          }]
                      },
                      {
                          xtype: 'container',
                          layout: 'hbox',
                          margin: '0 0 5 0',
                          items: [
                              {
                                  xtype: 'textfield',
                                  fieldLabel: 'Event Number',
                                  name: 'name',
                                  allowBlank: true
                              }
                          ]
                      },
                      {
                          xtype: 'container',
                          layout: 'hbox',
                          margin: '0 0 5 0',
                          items: [
                              {
                                  xtype: 'datefield',
                                  fieldLabel: 'Date',
                                  format: 'Y-m-d',
                                  name: 'startDate',
                                  invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
                                  emptyText: 'Start',
                                  allowBlank: false
                              },
                              {
                                  xtype: 'datefield',
                                  format: 'Y-m-d',
                                  name: 'endDate',
                                  invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
                                  margin: '0 0 0 6',
                                  emptyText: 'End',
                                  allowBlank: false
                              },
                          ]
                      },
                      {
                          xtype: 'container',
                          layout: 'hbox',
                          margin: '0 0 5 0',
                          items: [
                              {
                                  xtype: 'tagfield',
                                  fieldLabel: 'Environment',
                                  name: 'environmentIds',
                                  width: 500,
                                  store: {
                                      type: 'environments'
                                  },
                                  valueField: 'environmentId',
                                  displayField: 'environmentName',
                                  allowBlank: false
                              }]
                          },
                          {
                              xtype: 'container',
                              layout: 'hbox',
                              margin: '0 0 5 0',
                              items: [
                                  {
                                      xtype: 'tagfield',
                                      fieldLabel: 'Geographic Location',
                                      name: 'geographicLocationIds',
                                      width: 500,
                                      store: {
                                          type: 'locations'
                                      },
                                      valueField: 'locationId',
                                      tpl: Ext.create('Ext.XTemplate',
                                          '&lt;ul class="x-list-plain"&gt;&lt;tpl for="."&gt;',
                                          '&lt;li role="option" class="x-boundlist-item"&gt;{region}/Sub region: {subRegion}&lt;/li&gt;',
                                          '&lt;/tpl&gt;&lt;/ul&gt;'
                                      ),
                                      labelTpl: '{region}/Sub region: {subRegion}',
                                      allowBlank: false
                                  }
                              ]
                          },
                          {
                              xtype: 'container',
                              layout: 'hbox',
                              margin: '0 0 5 0',
                              items: [
                                  {
                                      xtype: 'textfield',
                                      fieldLabel: 'Geographic Location (Out of Area)',
                                      name: 'geographicLocationNotes',
                                      width: 400,
                                      emptyText: 'e.g. 30.2500 N, 97.7500 W',
                                      allowBlank: true
                                  }
                              ]
                          },
                          {
                              xtype: 'container',
                              layout: 'hbox',
                              margin: '0 0 5 0',
                              items: [
                                  {
                                      xtype: 'combobox',
                                      forceSelection: true,
                                      fieldLabel: 'Organization',
                                      name: 'organizationId',
                                      store: {
                                          type: 'organizations'
                                      },
                                      valueField: 'organizationId',
                                      displayField: 'displayName',
                                      allowBlank: false
                                  }
                              ]
                          },
                          {
                              xtype: 'container',
                              layout: 'hbox',
                              margin: '0 0 5 0',
                              items: [
                                  {
                                      xtype: 'textarea',
                                      fieldLabel: 'Event Notes',
                                      name: 'eventNotes',
                                      width: 500,
                                      height: 74
                                  }
                              ]
                          },
                          {
                              xtype: 'textarea',
                              fieldLabel: 'Event ID',
                              name: 'eventId',
                              hidden: true
                          }
                      ]
                  }],
                  buttons: [
                      {
                          text: 'Save Event',
                          handler: function() {
  
                              var form = this.up('form'); // get the form panel
  
                              var formData = form.getValues();
  
                              if (form.isValid()) { // make sure the form contains valid data before submitting
  
                              Ext.Ajax.request({
                                      url: 'api/events/create',
                                      method:'POST',
                                      headers: { 'Content-Type': 'application/json' },
                                      params : Ext.JSON.encode(formData), 
                                      success: function(form, action) {
                                          Ext.Msg.alert('Success', action.result);
                                      },
                                      failure: function(form, action) {
                                          Ext.Msg.alert('Submission failed', 'There was an error.', action.result);
                                      }
                                  });
                              } else { // display error alert if the data is invalid
                                  Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
                              }
                          }
                      }
                  ]     
              },
              {
                  title: 'Created Events',
                  region: 'east',
                  floatable: false,
                  margin: '5 0 0 0',
                  width: 500,
                  minWidth: 100,
                  maxWidth: 1000,
                  collapsed: true,
                  xtype: 'gridpanel',
                  store: {
                      type: 'createdEvents'
                  },
                  columns: [
                  {
                      header: 'Database ID',
                      dataIndex: 'eventId'
                  },
                  {
                      header: 'Event',
                      dataIndex: 'eventTypeId',
                      renderer: function(value, p, r) {
                          {return r.data['eventTypeName'] + '/' + r.data['eventDetail']}
                      }
                  },
                  {
                      header: 'Event Number',
                      dataIndex: 'name'
                  },
                  {
                      header: 'Start Date',
                      //this will be a problem because the form date is formatted as yyyy-mm-dd
                      dataIndex: 'startDateYear',
                      renderer: function(value, p, r) {
                          {return r.data['startDateYear'] + '-' + r.data['startDateMonth'] + '-' + r.data['startDateDay']}
                      }
                  },
                  {
                      header: 'End Date',
                      dataIndex: 'endDateYear',
                      renderer: function(value, p, r) {
                          {return r.data['endDateYear'] + '-' + r.data['endDateMonth'] + '-' + r.data['endDateDay']}
                      }
                  },
                  {
                      header: 'environments',
                      dataIndex: 'environmentIds',
                      renderer: function(value, p, r) {
                          {return r.data['environmentNames']}
                      }
                  },
                  {
                      header: 'Geographic Location',
                      dataIndex: 'geographicLocationIds',
                      renderer: function(value, p, r) {
                          { return r.data['geographicLocationRegion'] + '/' + r.data['geographicLocationSubregion'] }
                      }
                  },
                  {
                      header: 'Geographic Location Notes',
                      dataIndex: 'geographicLocationNotes'
                  },
                  {
                      header: 'Organization',
                      dataIndex: 'organizationID',
                      renderer: function(value, p, r) {
                          {return r.data['organizationDisplayName']}
                      }
                  },
                  {
                      header: 'Event Notes',
                      dataIndex: 'eventNotes'
                  }
                  ],
                  tbar: [{
                      text: 'Add new record to event',
                      scope: this,
                      handler: this.onAddClick
                  }]          
              },
  
          ];
  
          this.callParent();
      },
  
      onAddClick: function(sm, row, rec){
  
          //how to populate the form with the grid row data?
  
      }
  
  });
  </code></pre>
  
  <p>I've tried this solution, but it didn't work for me:
  <a href="http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#form-grid" rel="nofollow">http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#form-grid</a></p>