extjs form panel set default value textfield

Question

This seems like a trivial issue, but... I have a list of addresses in a panel to which I wish to add geolocation coordinates (and to display them on a map) that is rendered in a form panel, so that when I click on the address of interest in the panel an onTap is fired to do execute the onSelectGeolocation given below to open the form panel rendered in the ViewPort and to add any existing records to the associated form elements:

onSelectGeolocation: function(view, index, target, record, event) {
    console.log('Selected a Geolocation from the list');
    var geolocationForm = Ext.Viewport.down('geolocationEdit');


    if(!geolocationForm){
        geolocationForm = Ext.widget('geolocationEdit');
    }     
    geolocationForm.setRecord(record);
    geolocationForm.showBy(target);
}

The line that uses the setRecord method to write any existing records in my store to the form elements, however, is preventing the default values in my form panel below from getting written to the desired form elements. When I comment this out, all is good. Problem is that I need to grab those records that exist in my store, e.g., address, to display in my form. How can I do this AND write default values to my textfield elements in my form?

My form panel that is rendered as a ViewPort via the onTap is:

Ext.define('EvaluateIt.view.GeolocationEdit', {
    extend: 'Ext.form.Panel',
    alias : 'widget.geolocationEdit',
    requires: [
        'Ext.form.Panel',
        'Ext.form.FieldSet',
        'Ext.field.Number',
        'Ext.field.DatePicker',
        '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,
    scrollable: true,
    layout: {
        type: 'vbox'
    },
    defaults: {
        margin: '0 0 5 0',
        labelWidth: '40%',
        labelWrap: true
    },
    items: [
        {
            xtype: 'datepickerfield',
            destroyPickerOnHide: true,
            name : 'datOfEvaluatione',
            label: 'Date of evaluation',
            value: new Date(),
            picker: {
                yearFrom: 1990
            }
        },
        {   
            xtype: 'textfield',
            name: 'address',
            label: 'Address',
            itemId: 'address' 
        },
        {   
            xtype: 'textfield',
            name: 'latitude',
            label: 'Latitude',
            itemId: 'latitude',
            value: sessionStorage.latitude,             
        },
    /*  {   
            xtype: 'textfield',
            name: 'longitude',
            label: 'Longitude',
            itemId: 'longitude',
            value: sessionStorage.longitude
        },
        {   
            xtype: 'textfield',
            name: 'accuracy',
            label: 'Accuracy',
            itemId: 'accuracy',
            value: sessionStorage.accuracy
        },*/
        {
            xtype: 'button',
            itemId: 'save',
            text: 'Save'
        }

    ]
    }

});

extjs form panel set default value textfield

Answers (1)

Related Questions