How to insert a grid into the grid, on the basis of parent grid data?

Question

I am trying to put a grid inside in the all ready available grid's column on the basis of this parent grid data that if there is the data from the API call then my grid should display the data or if there is no data from the API response then it should not display anything in the parent grid column.

I have inserted the grid in the parent grid via the above code and below is my handler for to display the data in the child grid

I have tried this via the widget column but via this approach it is displaying displaying the data only from the last response of API

columns:[{
    dataIndex: 'JobCode',
    text: 'Job Code',
    renderer: 'applyCursor',
    flex: 1.5,                
    rowwidget: {
                widget: {
                    xtype: 'grid',
                    autoLoad: true,
                    modal: true,
                    margin: '30 10 10 10',
                    listeners: {
                        afterrender: 'loadData',
                    },
                    bind: {
                        store: '{paymentdetailsstore}',
                    },
                    columns: [{
                        text: 'Payment Type',
                        dataIndex: 'PaymentType_Name',
                        flex: 0.5
                    }, {
                        text: ' Received Date',
                        dataIndex: 'Received_DateTime',
                        flex: 0.5
                    }, {
                        text: 'Amount($)',
                        dataIndex: 'Amount',
                        flex: 0.5
                    }]
                }
            }
},{...},{...},{...}],


loadData: function (a, b, c, d, e) {
    debugger;
    let me = this,
        paymenthistorystore = this.getStore('paymenthistorystore'),
        paymentdetailsstore = this.getStore('paymentdetailsstore'),
        paymenthistorygrid = me.lookupReference('paymenthistory'),
        jobId = paymenthistorystore.getData().items,
        grid = a,
        id;
    console.log(jobId);
    Ext.each(jobId, function (items) {
        id = items.data.JobId;
        Ext.Ajax.request({
            url: '/api/jobs/GetPaymentHistory',
            method: 'GET',
            //async: false,
            params: {
                JobId: id
            },
            success: function (response, opts) {
                debugger;
                //var obj = Ext.decode(response.responseText);
                paymentdetailsstore = me.getStore('paymentdetailsstore');
                    try {
                        data = Ext.decode(response.responseText).data;
                    } catch (e) {
                        data = [];
                    }
                paymentdetailsstore.add(data);
                console.log(data);

                Ext.Msg.alert('Fiddle', 'Store contains ' + paymentdetailsstore.count() + ' records');
                },
            scope: paymentdetailsstore,

            failure: function (response, opts) {
                console.log('server-side failure with status code ' + response.status);
            }
        });
    });
}

I want that in the child grid the data must be display as per according to the API response.

Answer 1

The way I'd do this, is have the details as a field (of array type) inside the job model/record and use the rowViewModel to map inner data to the widget. The way it works, it creates a separate viewmodel instance per row, and so if you define a store inside that rowViewModel, it's going to be created for each job separately. Also from inside the rowViewModel, you can access the record's fields ('{record.<field>}'), and thus you can simply bind the store's data to it.

Ext.define('MyView', {
    viewModel: {
        stores: {
            outterGrid: {
                fields: ['name', 'innerGridData'],
                data: [{
                    name: 'Foo',
                    innerGridData: [{
                        innerField: 'Foo_a'
                    }, {
                        innerField: 'Foo_b'
                    }]
                }, {
                    name: 'Bar',
                    innerGridData: [{
                        innerField: 'Bar_a'
                    }, {
                        innerField: 'Bar_b'
                    }]
                }]
            }
        }
    },

    extend: 'Ext.grid.Panel',
    xtype: 'MyView',
    bind: {
        store: '{outterGrid}'
    },
    columns:[{
        dataIndex: 'name',
        flex: 1
    }, {
        xtype: 'widgetcolumn',
        flex: 1,
        widget: {
            xtype: 'grid',
            bind: {
                store: '{innerStore}'
            },
            columns: [{
                dataIndex: 'innerField',
                flex: 1
            }]
        }
    }],
    rowViewModel: {
        stores: {
            innerStore: {
                fields: ['innerField'],
                data: '{record.innerGridData}'
            }
        }
    }
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create({
            xtype: 'MyView',
            width: 300,
            height: 300,
            renderTo: Ext.getBody()
        });
    }
});