I have a child & parent store. Parent being APP.store.Clients and the child being APP.store.Websites. When a row is selected in one grid (populated by parent store; Clients) I want a 2nd grid to populate with data from the 2nd store (Websites). The following method is what is executed on the select event for the first grid. The problem is, when I look at 'selectedClient' (the record selected), there is no 'websites' in 'selectedClient.data'. HOWEVER, the data is present in the variable 'selectedClient.raw'

While I could just load it from selectedClient.raw.websites (this works), that seems like an incorrect solution. I would like to understand and get this working as intended. Where have I gone wrong?


Code:
clientRowSelected: function(rowModel, selectedClient, idx, eOpts) {
        //Client selected; populate form & tabs
        console.log('Row Selected');
        var websiteStore = this.getClientWebsites().getStore();
        websiteStore.loadData(selectedClient.data.websites);
        this.selectedClientId = record.get('id');
        if (record) {
            //Load the form
            this.getClientForm().getForm().loadRecord(record);
            //TODO: Load the grids in the tabs
        }
    },
Models & Stores

Code:
Ext.define('APP.model.Client', {
    extend: 'Ext.data.Model',
    requires:[
      'APP.model.Website', 'Ext.data.association.HasMany', 'Ext.data.association.BelongsTo'  
    ],
    fields: [
        {name: 'id',      type: 'string'},
        {name: 'name',    type: 'string'},
        {name: 'slug',    type: 'string'},
        {name: 'active',  type: 'boolean'},
        {name: 'current', type: 'boolean'}
    ],
    hasMany: {model: 'APP.model.Website',    name: 'websites'}
});
Code:
Ext.define('APP.model.Website', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',         type: 'string'},
        {name: 'client_id',  type: 'string'},
        {name: 'sub_domain', type: 'string'},
        {name: 'active',     type: 'boolean'}
    ],
    belongsTo: 'APP.model.Client'
});
Code:
Ext.define('APP.store.Clients', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    model: 'APP.model.Client',
    proxy: {
         type: 'ajax',
         url: '/client/list',
         reader: {
             type: 'json',
             root: 'items'
         }
     },
    sorters: [
        { property: 'name', direction: 'ASC' }
    ]
});
Code:
Ext.define('APP.store.Websites', {
    extend: 'Ext.data.Store',
    requires: ['Ext.ux.Msg'],
    autoLoad: false,
    model: 'APP.model.Website',
    proxy: {
        type: 'ajax',
        url: '/client/list',
        reader: {
            type: 'json',
            root: 'items'
        },
        writer: {
            type: 'json'
        }
    },
    sorters: [
        { property: 'sub_domain', direction: 'ASC' }
    ]
});