How to load nested many-to-many and the save chages with session

Is there a way to load many-to-many in a nested fashion?

I have two models: Location and LocationType. I want to autoLoad all Locations with their LocationTypes and display them on the map as individual markers. Then I want to allow users to create/edit Locations and add/remove their LocationTypes.

For now, types are loaded nested like in one-to-many, so each location has its own set of types, but they are different instances with different internalId. I want to use many-to-many so that I only have one record for each LocationType associated to many different Locations.

Code:

Ext.define('APP.model.Location', {
    extend: 'APP.model.Base',

    fields: [
        {name: 'countryId', reference: 'Country', unique: true},
        {name: 'name', type: 'string'},
        {name: 'description', type: 'string'},
        {name: 'lat', type: 'float'},
        {name: 'lng', type: 'float'},
        {name: 'created', type: 'date'}
    ],
    
    manyToMany: {
        LocationTypes: {
            type: 'LocationType',
            role: 'types',
            field: 'typeId',
            right: {
                field: 'locationId',
                role: 'locations'
            }
        }
    }
});

Code:

Ext.define('APP.model.LocationType', {
    extend: 'APP.model.Base',

    fields: [
        {name: 'name', type: 'string'},
        {name: 'type', type: 'string'}
    ],
    
    manyToMany: {
        Locations: {
            type: 'Location',
            role: 'locations',
            field: 'locationId',
            left: {
                field: 'typeId',
                role: 'types'
            }
        }
    }
});

I have a combobox with multiSelect: true, where users can add/remove types.

Code:

onTypeSelect: function(combo, records) {
    var view = this.getView(),
        location = view.getViewModel().get('location');

    console.log(records);
    
    location.types().removeAll();
    
    if (records.length) {
        location.types().add(records);
    }
}

Finally I want to save changes by using Ext.data.Session with a single batch.

Code:

saveLocation: function() {
    var view = this.getView(),
        session = view.getSession(),
        location = view.getViewModel().get('location'),
        batch = session.getSaveBatch();

    console.log('changes', session.getChanges());
    
    batch.on({
        complete: this.onSaveComplete,
        exception: this.onSaveException,
        scope: this
    });
    
    batch.start();
}

When I console.log(session.getChanges()), I get

Code:

Location: Object
    countryId: 99
    created: "1404263656"
    description: "fdas"
    id: "Location-1"
    lat: 30.760718908944472
    lng: 77.080078125
    name: "asdf"

LocationType: Object
    locations: Object
        C: Object
            1: Array[1]
                0: "Location-1"
            2: Array[1]
                0: "Location-1"
            3: Array[1]
                0: "Location-1"

The batch successfully saves the Location, but not the associated LocationTypes. After a successful onSaveComplete, session.getChanges() still returns and object with LocationType changes, but now with proper Location IDs. Do I need to handle these associations manually or can I leverage Ext.Direct? If yes, how?

I've been looking at ticket-app, but it's hard to debug it, because it's using Ext.ux.ajax.SimManager. Side question: how can I see what connections are being made by SimManager?

The documentation about Ext.data.Session and associations is very limited. It would be really cool if we had some more reading material