how to instantiate a formpanel when the form is a docked item in extjs - extjs4

Question

Very new to extjs 4.0. So i could be phrasing this incorrectly.
I have a layout with a series of nested panels. One of these panels is a form panel which i intend to use loadRecord to fill with data. Most examples i've seen using something like the following to load the records.
testForm.getForm().loadRecord(app.formStore);
However you will see below that my formpanel is nested. So how do i load the form in order to load record
title: 'Job Summary',
items: [
{
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
},
bodyPadding: 10,
title: '',
url: '/submit.html',
flex: 1,
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Submit'
},
{
xtype: 'button',
text: 'Cancel'
}
]
}
],
items: [
{
xtype: 'panel',
flex: 1,
items: [
{
xtype: 'radiogroup',
width: 400,
fieldLabel: 'Job Type',
items: [
{
xtype: 'radiofield',
boxLabel: 'Fix Price'
},
{
xtype: 'radiofield',
boxLabel: 'Production'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},

Answer 1

Here is the code which shows how to populate data in the formpanel:
Ext.onReady(function(){
//Define a model with field names mapping to the form field name
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: ['first', 'last']
});
//Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
first: 'Ajit',
last: 'Kumar'
});
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first', //this name must match with the field name in the model
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
disabled: true,
handler: function() {
}
}]
});
form.loadRecord(user);
});
So, the steps are:
Define a model, which must extend Ext.data.Model as the stores and
form expect the date to be in the model format
Create a form panel
Create an instance of the model with the data
Load the data in the form using the model instance