In ExtJS, how to handle master detail with updates to both tables

Question

The problem I'm trying to find the best solution for involves the standard scenario of a master table (orders for example) and a details table (orderlines). Both in separate tables. From the server, I can produce both json nested data and two separate entities. On my client (ExtJS) side I need to both display the nested data with a template as well as be able to do CRUD operations on both the orders and the details.

I have two solutions, neither of which I like. I'm preparing training material and want to offer the students an excellent solution, not one full of peril. Here are the two I've come up with.

Scenario 1

Create a two models and one store using the associations tag (belongsTo and hasmany). This works perfect for viewing the data, however the CUD of CRUD is really miserable for me. Maybe I am missing something but it seems you have to implement custom readers and do many unnatural things to make this work.

Scenario 2

Create two models and two stores. Implement a filter on the details store so that when a the master table (grid) changes row selection, the details table (grid) gets filtered. This makes creating a nested view for the template a little awkward because you have to build the json object yourself, but the bigger problem is that you have to load all your details ahead of time and filter on those on each master row selection. Or, you can do a

nother ajax request on every row change which makes the client not very performant.

I'd love to hear a better solution or how one of my scenarios could be better.

Answer 1

In similar problem in my application I am going with your scenario 1. What problems are you having with this?

The only issue I had was that association data was not getting sent to server on model.save. And the workaround was adding a Json Writer override.

Ext.define('SampleApp.config.CustomJsonWriter', {
    override: 'Ext.data.writer.Json',

    getRecordData: function (record) {
        var associatedData = record.getAssociatedData();

        record.associations.each(function (item, index) {
           var obj = {};
           obj[item.name] = associatedData[item.name];
           Ext.apply(record.data, obj);

        });

        return record.data;
    }
});

Hopefully, Sencha will include a flag for including association data in future ExtJS versions. But the workaround is quite simple as you can see.