如何在ExtJS(和Sencha架构师)中显示GridPanel中的嵌套对象
How to display nested objects in a GridPanel in ExtJS (and Sencha architect)?
我有一个传入的数组的提供对象,看起来像这样:
[{
"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 4.2.1升级到ExtJS 5.1.1)和使用Sencha Architect,它崩溃了。
问题1:Sencha Architect阻止在提供模型中为"product.description"创建条目,抱怨"。"字符。但是如果您将它创建为"whateveryouwant",您可以进入模型字段并将其重命名为"product.description"。
问题2:在解决"。"问题并运行应用程序后,"product.description"列的单元格为空白。
问题3:javascript控制台产生零错误。输入的数据看起来很好。
我应该如何得到这个嵌套的数据显示?
我的方法很简单。只需将mapping
属性以这种方式添加到模型中:
{
name: 'product.description',
type: 'string',
mapping : 'product.description'
}
不需要renderer
我当前的解决方法使用"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"而不是这个渲染技巧的答案。
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- Gridpanel在Extjs 4.0.7中没有显示在视口内,这是我的代码中的错误
- 如何在ExtJS4 GridPanel中保存更改时显示错误
- 在GridPanel Ext.net (ExtJS)中突出显示一组行
- 如何在ExtJS(和Sencha架构师)中显示GridPanel中的嵌套对象