Populating a form from a selected grid row

3. Ensure the grid has a row selection model and add a listener to listen to the
select event of Ext.selection.RowModel. When a row is selected we load
the record into the form panel:
var grid = Ext.create('Ext.grid.Panel', {
...
selType: 'rowmodel',
listeners: {
select: function(RowModel, record, index, eOpts){
formPanel.loadRecord(record);
}
},
...
});

4. Add a button to the form panel to submit the data back to the Model. This will update
the grid and submit the data to the server.
var formPanel = Ext.create('Ext.form.Panel', {
...
buttons: [{
text: 'Update Data',
handler: function(){
var form = this.up('form').getForm();
var recordIndex = form.getRecord().index;
var formValues = form.getValues();
var record = grid.getStore().getAt(recordIndex);
record.beginEdit();
record.set(formValues);
record.endEdit();
}
}],
...
});