Setting a value from the server in a ComboBox in ExtJS

I am using a DataStore with a JsonReader to populate the ComboBox, but the proper value is not being marked as selected.

ComboBox:

{
    fieldLabel: 'Business Unit',
    xtype:'combo',
    width:167,
    name: 'business_Unit',
    hiddenName: 'businessUnit',
    store: businessUnitStore,
    displayField: 'buName',
    valueField: 'buId',
    mode: 'remote',
    triggerAction: 'all',
    typeAhead: false,
    editable: false
}

and I use a JsonReader in my form.

var leadReader = new Ext.data.JsonReader({
    root: 'data',
    totalProperty: 'total',
    id: 'leadId'

}, [
    {name:'title', type: 'string'},
    {name:'firstName', type: 'string'},
    {name:'lastName', type: 'string'},
    {name:'designation', type: 'string'},
    {name:'business_Unit', type: 'string', mapping: 'businessUnit.buName'},
]);

This is the JSON response:

{"data":{"leadId":22,"firstName":"fname","lastName":"lname","designation":"President","businessUnit":{"buId":4,"buName":"US","buDescription":""}},"success":true}

I want the BusinessUnit = US selected in the combobox and also have all the other options available for selection in the combo when I load the form.

editForm.getForm().load({url:fetchUrl, method: 'GET'});

Everything works fine, except that the BusinessUnit=US is not selected in the combo.

The name field on the combo doesn't match the field in the json response (business_Unit vs businessUnit) but also I don't think BasicForm.load will work with nested objects. After the load call you may have to manually load it.

editForm.getForm().load({url: fetchUrl, method: 'GET', success: function(form, action) {
        var combo = form.findField('business_Unit');
        combo.setValue(action.result.data.businessUnit.buiId);
    }
});