Question

Hi Techies ，我已经在“Rowwidget”插件的帮助下在Ext JS 6.2中创建了嵌套Grid。但是我得到了外网格。但是，它没有显示内部网格。

我的代码可用于： Sencha Fiddle

提前致谢...

Answer 1

根据Sencha文件： http://docs.sencha.com/extjs/6.2.1/classic/Ext.data.schema.Association.html#ext-data-schema-association_association-concepts

在这种情况下，引用的属性应如下所示：

type：父模型的名称
inverse：函数的名称，该名称应该返回子商店（这是您应该在小部件商店绑定中引用的名称）

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

小部件中的更改：

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

我已经重构了要嵌套的数据。

[{
    "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。

这将解决问题的开始，但是在最初获取窗口小部件后添加数据时，数据将没有数据。

嵌套网格不在Ext JS 6.2中生成

2 个答案: