无法使用 loadData() 在 ExtJS 网格面板中加载数据答案

【问题标题】：Cannot load data in an ExtJS gridpanel with loadData()无法使用 loadData() 在 ExtJS 网格面板中加载数据
【发布时间】：2011-08-24 21:16:08
【问题描述】：

我需要定期在网格存储中添加新数据。商店由以下代码定义：

this.reader = new Ext.data.JsonReader({
        idProperty: 'id',
        fields: this.lesFields
    });
this.ds = new Ext.data.GroupingStore({
        reader: this.reader,
        data: this.leData,
        sortInfo: {field: 'dendisc', direction: 'ASC'},
        groupField: 'categorie'
    });

当我需要添加一些新数据时，我使用this.getStore().loadData(this.leData) 来执行此操作。从技术上讲，数据确实出现在网格的存储中，但我在显示器上只看到零（在int 字段中）和空白字符串（在string 字段中）。我在 Chrome 的控制台中做了一些研究，发现data 属性和json 属性在this.getStore().data 中不一样。在json 中有包含有效数据的数组，但在data 中只有零和空白字符串。

我错过了什么吗？ handleAs:'json' 属性会挽救局面吗？

【问题讨论】：

您如何准确定义您尝试加载的数据？
data 和json 属性的完整路径是this.getStore().data.items[i]
@sra，抱歉我不能发布截图。 this.leData 看起来像 [ Array[28], Array[28], Array[28], Array[28] ]。见link

标签： javascript extjs store gridpanel

【解决方案1】：

我不习惯 GroupingStores，但我认为读者期望像 { Id:0, Name: 'MyName' } 这样的 json 对象或此类对象的数组，然后尝试将它们与注册的字段名匹配。但我不知道你的数组中有什么，所以这只是一个猜测

【讨论】：

阅读器确实识别出数据。见the console output
@Giku 是的，它重新确认有数据并尝试读取它，但似乎读者无法将数据映射到相应的字段。因此它识别了数据但无法匹配它，因此您只会得到空记录。现在你的数组中有 JSON 对象还是只有值？
@Giku 没关系，也许我完全弄错了，但如果 this => Array[28] 的内容与图像匹配，意味着这只是 28 个值的集合，读者如何知道哪个值属于哪个字段...所以他只是插入一个空记录。据我所知，读者需要一个带有 { field: 'value' } 的 json 对象
@Giku 这样我就要求您提供有关您尝试加载的数据的更多详细信息
非常感谢您的反馈，sra。你是对的，读者找不到我要附加的数据的匹配项。我搜索了一种解决方案，以便将数组[...] 转换为对象{...}。我发现了一个函数here，我在里面做了一些修改。现在数据以应有的方式显示。再次感谢 sra，祝您有美好的一天。

【解决方案2】：

JsonReader 需要定义 root。 root 指向包含记录的子属性。

这里是从 ext 文档中获取的示例：

var myReader = new Ext.data.JsonReader({
    idProperty: 'id'
    root: 'rows',
    totalProperty: 'totalRows',
    fields: [
        {name: 'id' },
        {name: 'name' }
    ]
});

以及要读取的样本数据：

{
    success: true,
    totalRows: 100,
    rows: [  // root
        { id: 1, name: 'Alf' },
        { id: 2, name: 'Ben' },
        { id: 3, name: 'Cod' },
        ...
    ]
}

【讨论】：

如果一切正常，您应该检查您的字段定义。