extjs - 嵌套网格未在 Ext JS 6.2 中生成

Question

嗨，技术人员，我在“Rowwidget”插件的帮助下在 Ext JS 6.2 中创建了嵌套网格。但是我得到了外部网格。但是，它没有显示内部网格。

我遵循了这个Sencha 代码示例

我的代码可用于： 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

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

• 类型：父模型的名称
• 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。

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