title: load data from grid row into (pop up) form for editing
body: <p>I read in Ext JS in Action ( by J. Garcia) that if we have an instance of Ext.data.Record, we can use the form's loadRecord method to set the form's values. However, he does not give a working example of this (in the example that he uses data is loaded into a form through a file called data.php). I have searched many forums and found the following entry helpful as it gave me an idea on how to solve my problem by using form's loadRecord method: 
  <a href="https://stackoverflow.com/questions/10914803/load-data-from-grid-to-form">load data from grid to form</a></p>
  
  <p>Now the code for my store and grid is as follows:</p>
  
  <pre><code>var userstore = Ext.create('Ext.data.Store', {
    storeId: 'viewUsersStore',
    model: 'Configs',
    autoLoad: true,
    proxy: {
      type: 'ajax',
      url: '/user/getuserviewdata.castle',
      reader: {
        type: 'json',
        root: 'users'
      },
      listeners: {
        exception: function (proxy, response, operation, eOpts) {
          Ext.MessageBox.alert("Error", "Session has timed-out. Please re-login and try again.");
        }
      }
    }
  });
  
  var grid = Ext.create('Ext.grid.Panel', {
    id: 'viewUsersGrid',
    title: 'List of all users',
    store: Ext.data.StoreManager.lookup('viewUsersStore'),
    columns: [
      { header: 'Username', dataIndex: 'username' },
      { header: 'Full Name', dataIndex: 'fullName' },
      { header: 'Company', dataIndex: 'companyName' },
      { header: 'Latest Time Login', dataIndex: 'lastLogin' },
      { header: 'Current Status', dataIndex: 'status' },
      { header: 'Edit',
        menuDisabled: true,
        sortable: false,
        xtype: 'actioncolumn',
        width: 50,
        items: [{
          icon: '../../../Content/ext/img/icons/fam/user_edit.png',
          tooltip: 'Edit user',
          handler: function (grid, rowIndex, colIndex) {
            var rec = userstore.getAt(rowIndex);
            alert("Edit " + rec.get('username')+ "?");
            EditUser(rec.get('id'));
          }
        }]
      },
    ]
  });
  
  function EditUser(id) {
    //I think I need to have this code here - I don't think it's complete/correct though
    var formpanel = Ext.getCmp('CreateUserForm');
    formpanel.getForm().loadRecord(rec);
  }
  </code></pre>
  
  <p>'CreateUserForm' is the ID of a form that already exists and which should appear when user clicks on Edit icon. That pop-up form should then automatically be populated with the correct data from the grid row.</p>
  
  <p>However my code is not working. I get an error at the line 'formpanel.getForm().loadRecord(rec)' - it says 'Microsoft JScript runtime error: 'undefined' is null or not an object'.</p>
  
  <p>Any tips on how to solve this?</p>