Good day all!!! I hope this thread finds you well!!!

I'm having trouble with the form.loadRecord method. I have the following:

Code:
onDependantSelectionChange: function (model, selected, eOpts)
{
if (selected.length)
{
this.getPatientExaminationDetailForm().loadRecord(selected[0])
}
else
{
this.getPatientExaminationDetailForm().reset();
}
},
The form is using 'displayfield's to display the data. Here is the form layout:

Code:
Ext.define('ClaimCatch_RIS.view.patient.forms.PatientDetailFieldContainer',
{
extend : 'Ext.form.FieldContainer',
xtype : 'patientDetailFieldContainer',

requires : [
'Ext.layout.container.HBox'
],

layout : {
type : 'vbox',
align : 'stretch'
},

initComponent: function () 
{
this.items = [{
xtype : 'fieldcontainer',
layout : 'hbox',
defaultType : 'displayfield',
defaults : {
labelAlign : 'left'
},
items : [{
name : 'Title_RowID',
fieldLabel : 'Title',
width : 200,
labelWidth : 70,
renderer : function (value, metaData, record, rowIndex, colIndex, store, view) 
{
var catRecord = Ext.getStore('Title').findRecord('Title_RowID', value);

return catRecord ? catRecord.get('Title_Descr') : '';
}
},
{
name : 'Dependant_SName',
fieldLabel : 'Surname',
margin : '0 0 0 6',
flex : 2
},
{
xtype : 'displayfield',
name : 'Dependant_FName',
fieldLabel : 'First Name(s)',
margin : '0 0 0 6',
flex : 3
}]
},
{
xtype : 'fieldcontainer',
layout : 'hbox',
defaultType : 'displayfield',
defaults : {
labelAlign : 'left',
grow : false
},
items : [{
name : 'Gender_RowID',
fieldLabel : 'Gender',
width : 200,
labelWidth : 70,
renderer : function (value, metaData, record, rowIndex, colIndex, store, view) 
{
var catRecord = Ext.getStore('Gender').findRecord('Gender_RowID', value);

return catRecord ? catRecord.get('Gender_Descr') : '';
}
},
{
name : 'Relation_RowID',
fieldLabel : 'Relationship',
margin : '0 0 0 6',
flex : 2,
renderer : function (value, metaData, record, rowIndex, colIndex, store, view) 
{
var catRecord = Ext.getStore('Relationship').findRecord('Relation_RowID', value);

return catRecord ? catRecord.get('Relation_Descr') : '';
}
},
{
name : 'Dependant_DOB',
fieldLabel : 'Date Of Birth',
margin : '0 0 0 6',
flex : 3,
renderer : Ext.util.Format.dateRenderer('d/m/Y')
}]
}];

this.callParent(arguments);
}

});
My problem is that when I click on a grid row. There is a 2sec delay before the 'displayfield's display the data.

What is causing this delay; and how can I fix it???