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

我要这样做的方法是，将详细信息作为作业模型/记录中的一个字段（数组类型），并使用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()
        });
    }
});

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

1 个答案: