Ext.getCmp("myForm") is undefined issue - extjs4

Question

In one of my panels i have a form panel
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
}
I wish to bind data to this and have the following code.
var form = Ext.getCmp('formJobSummary').getForm();
form.loadRecord(user);
I am getting:
Ext.getCmp("formJobSummary") is undefined
So obviously the loadRecord is out of scope. Given that my architecture is from the designer and has 2 files. Where do i put this loadRecord statement.
MyPanel.js
//Define a model with field names mapping to the form field name
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: ['quotedPrice', 'name']
});
//Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
quotedPrice: 'test',
name: 'test'
});
Ext.define('MyApp.view.MyPanel', {
extend: 'MyApp.view.ui.MyPanel',
initComponent: function () {
var me = this;
me.callParent(arguments);
me.down('button[text=Submit]').on('click',
me.onSubmitBtnClick, me);
me.down('button[text=Cancel]').on('click',
me.onCancelBtnClick, me);
},
onSubmitBtnClick: function () {
var conn = new Ext.data.Connection();
var est = Ext.getCmp('estimate');
alert(est.getValue());
conn.request({
method: 'POST',
url: 'tmp.php',
params: {
foo: "bar"
},
success: function (responseObject) { alert(responseObject.responseText); },
failure: function () { alert(est); }
});
},
onCancelBtnClick: function () {
}
});
var form = Ext.getCmp('formJobSummary').getForm(); //returns form1
form.loadRecord(user);
ui/MyPanel.js
Ext.define('MyApp.view.ui.MyPanel', {
extend: 'Ext.panel.Panel',
height: 600,
width: 950,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'JobPanel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
flex: 1,
items: [
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
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',
id: 'quotedPrice',
name: 'quotedPrice',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
id: 'clientPO',
name: 'clientPO',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
id: 'jobQuantity',
name: 'jobQuantity',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
id: 'filesOver',
name: 'filesOver',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
id: 'previousJobId',
name: 'previousJobId',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
id: 'estimate',
name: 'estimate',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},
{
xtype: 'panel',
title: 'Parts'
},
{
xtype: 'panel',
title: 'Process'
},
{
xtype: 'panel',
title: 'Invoice'
}
]
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'FooterPanel',
flex: 1
}
]
});
me.callParent(arguments);
}
});

Answer 1

During the execution of your statement var form = Ext.getCmp('formJobSummary').getForm(); obviously the formJobSummary is undefined (ie, it doesn't exist!!). Your Ext.define doesn't create a instance of the view. The code you are trying to execute is on a global scope.. meaning it will get executed as soon as the javascript file is loaded. Ideally, It should get called after an instance of the class is created.
So, your solution will be identify, when you need to load your form with the data you have. For example, you might want to load the data when you render the form or when some button is clicked etc. That should help you solve the problem.