5

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...

guruprabhus
  • 69
  • 7
  • You followed it, but you overlooked that the variable names and the model names were carefully chosen. Your company record does not have a model field called ordersListJSONArray, because there is no ordersListJSONArrayModel that has company as an association. So `{record.ordersListJSONArray}` is pointing into the middle of nowhere. – Alexander Jul 29 '16 at 04:34
  • Thanks for ur suggestion @Alexander . However it could be great if you share the corrected code in Sencha fiddle. Regards, – guruprabhus Jul 29 '16 at 13:25
  • Thanks @Alexander. Just now I got your point. moreover we have to follow the naming standards while mapping the another models in **Ext stores**. And also we can't do that without **RESTFUL** api service call. – guruprabhus Nov 03 '16 at 05:32
  • Anybody able to solve this yet? – user6123723 Feb 06 '17 at 15:47

2 Answers2

2

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
            }]
        }
Zsolt Medgyesi
  • 169
  • 6
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.

user2915010
  • 47
  • 5