Как вставить сетку в сетку на основе данных родительской сетки?

Question

Я пытаюсь поместить сетку внутрь столбца всех готовых доступных сеток на основе этих данных родительской сетки, что если есть данные из вызова API, то моя сетка должна отображать данные или если нет данных из тогда ответ API не должен ничего отображать в столбце родительской сетки.

Я вставил сетку в родительскую сетку с помощью приведенного выше кода и ниже мой обработчик для отображения данных в дочерней сетке

Я пробовал это через столбец виджета, но при таком подходе он отображает отображение данных только из последнего ответа 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);
            }
        });
    });
}

Я хочу, чтобы в дочерней сетке данные отображались в соответствии с ответом API.

Answer 1

Способ, которым я бы это сделал, состоит в том, чтобы получить детали в виде поля (типа массива) внутри модели / записи проекта и использовать rowViewModel для сопоставления внутренних данных с виджетом. Как это работает, он создает отдельный экземпляр viewmodel для каждой строки, и поэтому, если вы определите хранилище внутри этой rowViewModel, он будет создан для каждого задания отдельно. Также из rowViewModel вы можете получить доступ к полям записи ('{record.<field>}'), и, таким образом, вы можете просто привязать к ней данные магазина.

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()
        });
    }
});