ExtJs doesn't load data to a form using ext.data.store

Question

i need to load the data from a json object in to the form panel when the form is loaded my code is like this

this is my data model

Ext.define('Contact', {
extend : 'Ext.data.Model',
fields : [ {
    name : 'first',
    mapping : 'name.first'
}, {
    name : 'last',
    mapping : 'name.last'
}, 'company', 'email', {
    name : 'dob',
    type : 'date',
    dateFormat : 'm/d/Y'
} ]

});

and this is my data store

var store = Ext
    .create(
            'Ext.data.Store',
            {
                // alert("inside")
                // id: 'store',
                model : 'Contact',
                proxy : {
                    type : 'ajax',
                    url : 'http://localhost:8090/extjs-crud-grid-spring-hibernate/contact/view.action',
                    reader : 'json',
                    root : 'contact'
                },
                autoLoad : true
            });

and this is my form panel

Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
    title : 'Simple Form with FieldSets',
    labelWidth : 75, // label settings here cascade unless
    // overridden
    // url : 'save-form.php',
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    width : 340,
    bodyPadding : 5,

    layout : 'anchor', // arrange fieldsets side by side
    items : [ {
        xtype : 'fieldset',
        title : 'Contact Information',
        defaultType : 'textfield',
        defaults : {
            width : 280
        },
        items : [ {
            fieldLabel : 'First Name',
            emptyText : 'First Name',
            name : 'first'
        }, {
            fieldLabel : 'Last Name',
            emptyText : 'Last Name',
            name : 'last'
        }, {
            fieldLabel : 'Company',
            name : 'company'
        }, {
            fieldLabel : 'Email',
            name : 'email',
            vtype : 'email'
        }, {
            xtype : 'datefield',
            fieldLabel : 'Date of Birth',
            name : 'dob',
            allowBlank : false,
            maxValue : new Date()
        } ]
    } ],    
    renderTo : Ext.getBody()
}); 
var record = store.getAt(0);

formPanel.getForm().loadRecord(record);

});

and this is my json format

{
  "contact": {
    "name": {
      "first": "Aaron",
      "last": "Conran"
    },
    "company": "Ext JS",
    "email": "support@sencha.com",
    "state": "OH",
    "dob": "04/15/2007"
  }
}

when i try to put this line "formPanel.getForm().loadRecord(record)" it gives me this error "Uncaught TypeError: Cannot call method 'getData' of undefined " as well as this doesn't load the data in to the form panel when loaded

hope that anybody can help me

Answer 1

Are you getting data in record variable. Please refer below example...

Instances of this class are only created by a Form when loading.

Response Packet Criteria

A response packet must contain:

• success property : Boolean
• data property : Object

The data property contains the values of Fields to load. The individual value object for each Field is passed to the Field's setValue method.

JSON Packets

By default, response packets are assumed to be JSON, so for the following form load call:

var myFormPanel = new Ext.form.FormPanel({
    title: 'Client and routing info',
    items: [{
        fieldLabel: 'Client',
        name: 'clientName'
    }, {
        fieldLabel: 'Port of loading',
        name: 'portOfLoading'
    }, {
        fieldLabel: 'Port of discharge',
        name: 'portOfDischarge'
    }]
});
myFormPanel.getForm().load({
    url: '/getRoutingInfo.php',
    params: {
        consignmentRef: myConsignmentRef
    },
    failure: function(form, action) {
        Ext.Msg.alert("Load failed", action.result.errorMessage);
    }
});

a success response packet may look like this:

{
    success: true,
    data: {
        clientName: "Fred. Olsen Lines",
        portOfLoading: "FXT",
        portOfDischarge: "OSL"
    }
}

while a failure response packet may look like this:

{
    success: false,
    errorMessage: "Consignment reference not found"
}

Other data may be placed into the response for processing the Form's callback or event handler methods. The object decoded from this JSON is available in the result property.