如何在ExtJS(和Sencha架构师)的GridPanel中显示嵌套对象?

时间:2015-06-09 13:52:33

标签: javascript extjs extjs5 sencha-architect extjs-grid

我有一个传入的Provide对象数组,如下所示:

amf

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

现在我想在GridPanel中显示这些产品,但也包括这些行中的嵌套产品信息。以下是我之前的做法:

[{
  "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."
  }
}]

这很好用。然后,在某个地方(包括升级到ExtJS 5.1.1(来自ExtJS 4.2.1)和使用Sencha Architect,它就破了。

问题1:Sencha Architect阻止在产品模型中为“product.description”创建条目,抱怨“。”字符。但是如果你把它创建为“whateveryouwant”,你可以进入模型字段并将其重命名为“product.description”。

问题2:解决“。”问题后。发布并运行应用程序时,“product.description”列的单元格为空白。

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

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

2 个答案:

答案 0 :(得分:4)

我这样做非常简单。只需以这种方式将mapping属性添加到模型中:

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

无需renderer

答案 1 :(得分:1)

我目前的解决方法可能会帮助处于相同情况的其他人使用“渲染器”子句来显示所需的信息。

{
    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”而不是这个渲染技巧。