Updating a value on an Ext.form.Panel - extjs

Question

The following should be trivial, but I cannot get it to work:
I have the following Ext.form.Panel:
Ext.define('EvaluateIt.view.SiteEvaluationForm', {
extend: 'Ext.form.Panel',
alias : 'widget.siteEvaluationForm',
id: 'evaluationId',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Url',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
//width: 400,
//height: 330,
width: Ext.os.deviceType == 'Phone' ? screen.width : 300,
height: Ext.os.deviceType == 'Phone' ? screen.height : 500,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'textfield',
name: 'address',
label: 'Address',
itemId: 'address'
},
{
xtype: 'hiddenfield',
itemId: 'imageUriId',
name: 'imageUri'
},
{
xtype: 'button',
itemId: 'siteImage',
text: 'Take Photo'
},
{
xtype: 'button',
itemId: 'save',
text: 'Save'
}
]
}
});
Which gets opened from an onItemDisclosure in a list view, and thus has a record bound to it.
When the 'siteImage' button is tapped, the user selects an image from the photo gallery and the uri is written to a temporary store for processing. This part works just fine.
What I need to do: When 'save' in the above form is tapped I need to take the uri from the temporary store and write it to the same store that all of the values from the above form get saved to.
To do this, I have the following method:
onSaveSiteEvaluation: function(button) {
console.log('Button Click for Save');
//var form = button.up('panel');
var form = Ext.getCmp('evaluationId');
//get the record
var record = form.getRecord();
//get the form values
//var values = form.getValues();
// return a clone for updating of values
var values = Ext.clone(form.getValues());
//if a new siteEvaluation
if(!record){
var newRecord = new EvaluateIt.model.SiteEvaluation(values);
Ext.getStore('SiteEvaluations').add(newRecord);
}
//existing siteEvaluation
else {
// get image uri from temp store
var images = Ext.create('EvaluateIt.store.ImageQueue');
images.queryBy(function(record,id){
images = Ext.getStore(images);
if (images.getCount() > 0) {
var uri = record.get('src');
// image = Ext.getCmp('imageUri');
//image = form.setValue(uri);
//form.getCmp('imageId').setValue(uri);
console.log('URI: ' + uri);
// THIS DOES NOT WORK!!
form.setValues({
imageUri: uri
})
//record.set('imageUri',uri)
console.log('imageUri: '+ record.get('imageUri'));
}
});
// do stuff
record.set(values);
}
form.hide();
//save the data to the Web local Storage
Ext.getStore('SiteEvaluations').sync();
},
Everything in this method works EXCEPT where I write the value of the uri to the form
form.setValues({
imageUri: uri
})
I've tried making 'uriImage' as an xType of hiddenfield and textfield, I've tried cloning the values from the form, etc. all with absolutely no luck in updating the actual attribute imageUri in the store (NOTE: All other form values are updated just fine). What am I missing? Thanks!
UPDATE
This works:
images.queryBy(function(iRecord,id){
images = Ext.getStore(images);
if (images.getCount() > 0) {
var uri = iRecord.get('src');
// update store with URI
form.setValues({
imageUri: uri
})
values = form.getValues();
record = form.getRecord();
}
});
// do stuff
record.set(values);
All's well that ends well!

Answer 1

Because Ext.form.Panel doesn't have setValue method. You first need to get basic form out of it:
form.getForm().setValue();
UPDATE: My bad, I was looking at the ExtJs docs and not Sencha Touch. your form does have setValue method.
After you call setValues(), can you go getRecord() again? Also looks like your record internal variable is defined twice. That should not be an issue, but...