Updating a value on an Ext.form.Panel

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...