Nested Grid not generating in Ext JS 6.2

Question

Hi Techies, I have created the nested Grid in Ext JS 6.2 with the help of "Rowwidget" plugin. However I have get the outer Grid. But, it does not shown the inner grid.

I followed this Sencha code example

My code avaiable in: Sencha Fiddle

Thanks in advance...

Answer 1

According to the Sencha documentation: http://docs.sencha.com/extjs/6.2.1/classic/Ext.data.schema.Association.html#ext-data-schema-association_association-concepts

In this case the properties of the reference should be the following:

• type: the name of the parent-Model
• inverse: the name of the function, which should return the sub-Store (this is the name, which you should reference to, in the widget store binding)

Changes in the orderModel:

var orderMDL = Ext.define('orderModel', {
extend: 'Ext.data.Model',

fields: [
// Declare an association with Company.
// Each Company record will be decorated with
// an "orders" method which yields a store
// containing associated orders.
{
    name: 'companyId',
    reference: {
        type:'companyModel',
        inverse:'orders'
    }
}, {
    name: 'productCode'
}, {
    name: 'quantity',
    type: 'number'
}, {
    name: 'date',
    type: 'date',
    dateFormat: 'Y-m-d'
}, {
    name: 'shipped',
    type: 'boolean'
}],

proxy: {
    type: 'memory',
    data: ordersListJSONArray
}});

Changes in the widget:

widget: {
            xtype: 'grid',
            autoLoad: true,
            bind: {
                store: '{record.orders}',
                title: 'Orders for {record.name}'
            },
            columns: [{
                text: 'Order Id',
                dataIndex: 'id',
                width: 75
            }, {
                text: 'Procuct code',
                dataIndex: 'productCode',
                width: 265
            }, {
                text: 'Quantity',
                dataIndex: 'quantity',
                width: 100,
                align: 'right'
            }, {
                format: 'Y-m-d',
                width: 120,
                text: 'Date',
                dataIndex: 'date'
            }, {
                text: 'Shipped',
                dataIndex: 'shipped',
                width: 75
            }]
        }

Answer 2

I have refactored your data to be nested.

[{
    "id": 1,
    "name": "Roodel",
    "phone": "602-736-2835",
    "price": 59.47,
    "change": 1.23,
    "lastChange": "10/8",
    "industry": "Manufacturing",
    "desc": "In hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.\n\nNulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi.\n\nCras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque.",
    "pctChange": 2.11,
    "orders": [{
        "id": 1,
        "companyId": 1,
        "productCode": "96f570a8-5218-46b3-8e71-0551bcc5ecb4",
        "quantity": 83,
        "date": "2015-10-07",
        "shipped": true
    }]
}, {
    "id": 2,
    "name": "Voomm",
    "phone": "662-254-4213",
    "price": 41.31,
    "change": 2.64,
    "lastChange": "10/18",
    "industry": "Services",
    "desc": "Curabitur at ipsum ac tellus semper interdum. Mauris ullamcorper purus sit amet nulla. Quisque arcu libero, rutrum ac, lobortis vel, dapibus at, diam.",
    "pctChange": 6.83,
    "orders": [{
        "id": 2,
        "companyId": 2,
        "productCode": "af7e56bf-09a9-4ff4-9b02-f5e6715e053b",
        "quantity": 14,
        "date": "2015-10-11",
        "shipped": false
    }]
}]

https://fiddle.sencha.com/#fiddle/2jdl.

This will fix the problem to start with but when adding data after the initial get the widget data will not have the data.