如何在 ExtJS（和 Sencha 架构师）的 GridPanel 中显示嵌套对象？

Question

我有一个传入的 Offering 对象数组，如下所示：

[{
  "id" : 16,
  "price" : 500,
  "quantity" : 2000,
  "denomination" : "case",
  "denominationPlural" : "cases",
  "product" : {
    "id" : 14,
    "description" : "This is the text description for product 14."
  }
}, {
  "id" : 18,
  "price" : 500,
  "quantity" : 1,
  "denomination" : "study",
  "denominationPlural" : "studies",
  "product" : {
    "id" : 17,
    "description" : "This is a text description for product 17."
  }
}]

产品是产品乘以价格的数量。

现在我想在 GridPanel 中显示这些产品，但也在那些行中包含嵌套的产品信息。这是我之前的做法：

Ext.define('Offering', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'id', type: 'number'},
                {name: 'price', type: 'number'},
                {name: 'quantity', type: 'number'},
                {name: 'denomination', type: 'string'},
                {name: 'denominationPlural', type: 'string'},
                {name: 'product.description', type: 'string'},
            ]
        });



var offeringStore = Ext.create('Ext.data.Store', {
             autoDestroy: true,
             model: 'Offering',
             proxy: {
                 type: 'ajax',
                 url: '/offerings',
                 reader: {
                     type: 'json',
                     root: 'success'
                 }
             },
             autoLoad:true
         });

var offeringGrid = Ext.create('Ext.grid.Panel', {
            store: offeringStore,
            columns: [{
                    header: 'id',
                    dataIndex: 'id'
                }, {
                    header: 'price',
                    dataIndex: 'price'
                }, {
                    header: 'quantity',
                    dataIndex: 'quantity'
                }, {
                    header: 'denomination',
                    dataIndex: 'denomination'
                }, {
                    header: 'description',
                    dataIndex: 'product.description'
                },
            };

这工作得很好。然后，在某个地方（包括升级到 ExtJS 5.1.1（从 ExtJS 4.2.1）和使用 Sencha Architect，它坏了。

问题 1：Sencha Architect 阻止在产品模型中为 "product.description" 创建条目，抱怨“.”特点。但是，如果您将其创建为 "whateveryouwant"，则可以进入模型字段并将其重命名为 "product.description"。

问题 2：解决“.”之后问题和运行应用程序，"product.description" 列的单元格为空白。

问题 3：javascript 控制台产生零错误。传入的数据看起来不错。

我应该如何让这个嵌套数据显示出来？

Answer 1

我目前的解决方法可能会帮助处于相同情况的其他人，它使用 "renderer" 子句来显示所需的信息。

{
    xtype: 'gridpanel',
    title: 'Offerings',
    bind: {
        store: '{OfferingsStore}'
    },
    columns: [
            ...
            {
                xtype: 'gridcolumn',
                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                    return record.getData().product.description;
                },
                text: 'Product Description'
            },
            ...
      ]

但我仍然想要一个关于在产品模型定义中使用 "product.description" 而不是这个渲染技巧的答案。

Answer 2

我的方法很简单。只需以这种方式将 mapping 属性添加到模型中：

{
    name: 'product.description', 
    type: 'string',
    mapping : 'product.description'
}

不需要renderer。

如何在 ExtJS（和 Sencha 架构师）的 GridPanel 中显示嵌套对象？

How to display nested objects in a GridPanel in ExtJS (and Sencha architect)?

javascript

extjs

extjs5

sencha-architect

extjs-grid