bind a grid to form without using mvc - extjs

Question

I am trying to bind a grid data to a form in extjs. when i click on a grid row, the details should be populated in form. Can i do that in a simple way without using MVC. I have wrote the below code. help me further. Thank you
// JavaScript Document
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'id','name', 'email', 'phone' ]
});
Ext.onReady(function() {
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ id: '1', name: 'srb', email: 'srb#gmail.com', phone: '555-111-1224' },
{ id: '2', name: 'srv', email: 'srv#gmail.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
title: 'All Users',
columns: [
{
text: 'Id',
dataIndex: 'id' ,
flex: 1
},
{
text: 'Name',
dataIndex: 'name',
flex: 2
},
{
text: 'Email Address',
flex: 3,
dataIndex: 'email',
},
{
text: 'Phone Number',
flex: 2,
dataIndex: 'phone'
}
],
listeners : {
itemclick: function(dv, record, item, index, e) {
var nm= record.get('name');
}
},
});
Ext.create('Ext.form.FieldSet',{
renderTo: Ext.getBody(),
margin: '0 0 0 10',
title:'User details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id'
},{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Email Id',
name: 'email'
},{
fieldLabel: 'Phone Number',
name: 'phone'
}]
});
});

Answer 1

Use Ext.form.Panel instead of Ext.form.FieldSet. Field set is more of a decorating container. The form panel provides support for loading / saving data from the form, etc.
Then you need a way to access your form panel in your click event. The absolute simplest is to set an id on the form, and use Ext.getCmp to get a ref to the form. Since you've already got the record there, you can just use the loadRecord method of the form panel.
And you'll be done! Be happy to have named your model & form fields the same ;)
The final call in the event listener will look like this:
Ext.getCmp('myForm').loadRecord(record);

Answer 2

what version of extjs are you using?
you don't seem to have a form defined or instantiated.
in your grid's itemclick event handler, you need to get a reference to the form, and call form.loadRecord with the passed in record (2nd argument):
itemclick: function(dv, record, item, index, e) {
var form = getAReferenceToTheFormObject();
form.loadRecord(record);
}
example:
http://jsfiddle.net/4TSDu/74/