title: ExtJs doesn't load data to a form
body: <p>this is my model</p>
  
  <pre><code>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'
  } ]
  </code></pre>
  
  <p>});</p>
  
  <p>and this is my store</p>
  
  <pre><code>var store = Ext
      .create(
              'Ext.data.Store',
              {
                  // alert("inside")
                  // id: 'store',
                  model : 'Contact',
                  proxy : {
                      type : 'ajax',
                      url : 'urlForJson',
                      reader : 'json',
                      root : 'contact'
                  },
                  autoLoad : true
              });
  </code></pre>
  
  <p>and this is my form panel</p>
  
  <pre><code>Ext.onReady(function() {
  var formPanel = Ext.create('Ext.form.Panel', {
      title : 'Simple Form with FieldSets',
      labelWidth : 75, 
      // 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()
          } ]
      } ],
  
      buttons : [ {
          text : 'Load',
          handler : function() {
              formPanel.getForm().load({
                  url : 'xml-form-data.xml',
                  waitMsg : 'Loading...'
              });
          }
      }, {
          text : 'Submit',
          disabled : true,
          formBind : true,
          handler : function() {
              this.up('form').getForm().submit({
                  url : 'xml-form-errors.xml',
                  submitEmptyText : false,
                  waitMsg : 'Saving Data...'
              });
          }
      } ],
      renderTo : Ext.getBody()
  });
  var record = store.getAt(0);
   formPanel.getForm().loadRecord(record);
  </code></pre>
  
  <p>}</p>
  
  <p>);</p>
  
  <p>but this is not loading the data from the store,
  and also when i put this line</p>
  
  <p>'formPanel.getForm().loadRecord(record);'</p>
  
  <p>it gives me this ERROR as well
  "Uncaught TypeError: Cannot call method 'getData' of undefined "
  hope that anybody can help me</p>