如何从ExtJS网格显示具有不同存储区的嵌套对象

ExtJS 是一个用于构建富客户端 web 应用程序的 JavaScript 框架。在 ExtJS 中，网格（Grid）组件是用来展示数据表格式信息的常用组件。如果你想要在网格中显示具有不同存储区的嵌套对象，你需要对数据进行适当的处理，以便网格能够理解并展示这些数据。

基础概念

存储区（Store）：在 ExtJS 中，存储区是用来管理数据的对象，它可以包含多个记录，并提供数据加载、排序、过滤等功能。
嵌套对象：指的是对象中包含其他对象作为其属性，这些内部对象可以是简单的数据结构，也可以是更复杂的对象。

类型

简单嵌套：对象的属性直接包含另一个对象。
复杂嵌套：对象的属性包含多层嵌套的对象或数组。

应用场景

订单管理系统：显示订单详情，包括客户信息、产品列表等。
库存管理系统：展示库存项，包括供应商信息、批次详情等。

实现方法

要在 ExtJS 网格中显示嵌套对象，你可以使用 Ext.grid.Panel 组件，并自定义列的渲染器（renderer）来处理嵌套数据。

示例代码

假设我们有一个存储区，其中包含以下结构的记录：

{
    id: 1,
    name: 'Item 1',
    details: {
        description: 'This is item 1',
        price: 100,
        supplier: {
            name: 'Supplier A',
            contact: 'contact@supplierA.com'
        }
    }
}

我们可以创建一个网格来显示这些数据，并使用自定义渲染器来展示嵌套的 details 和 supplier 对象。

Ext.define('MyApp.view.MyGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'mygrid',
    store: {
        fields: ['id', 'name', 'details'],
        data: [
            // ... 上面的数据结构 ...
        ]
    },
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: 'Name', dataIndex: 'name' },
        { 
            text: 'Description', 
            dataIndex: 'details.description', 
            renderer: function(value, metaData, record) {
                return record.get('details').description;
            }
        },
        { 
            text: 'Price', 
            dataIndex: 'details.price', 
            renderer: function(value, metaData, record) {
                return record.get('details').price;
            }
        },
        { 
            text: 'Supplier Name', 
            dataIndex: 'details.supplier.name', 
            renderer: function(value, metaData, record) {
                return record.get('details').supplier.name;
            }
        },
        { 
            text: 'Supplier Contact', 
            dataIndex: 'details.supplier.contact', 
            renderer: function(value, metaData, record) {
                return record.get('details').supplier.contact;
            }
        }
    ]
});