javascript - extJS 网格错误，未显示 JSON 数据

Question

我已将我的商店配置为:

var store = new Ext.data.JsonStore({
url: 'gridData.php',
root: 'movies',
fields: ['film_id', 'title', 'release_year', 'rating']
});

然后将我的网格定义为:

var grid = new Ext.grid.GridPanel({
    title:'Movies',
    store: store,
    columns: [
                { header: "ID", width: 30, dataIndex: 'film_id',sortable: true, hidden:true },
                { id: 'title-col', header: "Title", width: 180,dataIndex: 'title', sortable: true },
                { header: "Rating", width: 75, dataIndex: 'rating',sortable: true },
                { header: "Year", width: 75, dataIndex: 'release_year',sortable: true, align: 'center' }
        ],
    autoExpandColumn: 'title-col',
    renderTo: Ext.getBody(),
    width: 600,
    height: 300,
    loadMask: true
});

然后我加载商店:

store.load();

我在 Ext.onReady 方法中完成所有这些工作。我要显示的数据是从具有以下形式的 php 文件中获取的:

{ "count":2, "movies":[{ "film_id":"1", "title":"ACADEMY DINOSAUR", "description":"An Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies", "release_year":"2006", "rating":"PG", "special_features":"Deleted Scenes,Behind the Scenes" }, { "film_id":"2", "title":"ACE GOLDFINGER", "description":"An Astounding Epistle of a Database Administrator And an Explorer who must Find a Car in Ancient China", "release_year":"2006", "rating":"G", "special_features":"Trailers,Deleted Scenes" } ] }

当页面加载时，网格一直显示加载掩码，数据从不显示。另外，我收到错误 a is undefined. 我错过了什么？

编辑

我发现在为存储分配 URL 时存在一些路径问题，但仍然无法解决。我的“gridData.php”文件、JS 文件和显示网格的 HTML 文件位于同一个文件夹中，我在“localhost/myapp”上。请帮忙!

Answer 1

您的商店声明自己具有这些字段:

• 编号
• 标题
• 发布年份
• 评分

但是，您的 JSON 数据行包含以下字段:

• 电影编号
• 标题
• 描述
• 发布年份
• 评分
• 特殊功能

您的错误可能是由于网格寻找数据中不存在的“id”字段引起的。

一种选择是将商店的字段定义更改为:

['film_id', 'title', 'release_year', 'rating']

您还需要对列定义进行相应的更改:

{header: "ID", width: 30, dataIndex: 'film_id', sortable: true, hidden: true}

另一种选择是将映射添加到商店中的字段定义:

[{name: 'id', mapping: 'film_id'}, 'title', 'release_year', 'rating']

---

此外，我建议在开发时使用“ext-all-debug.js”而不是“ext-all.js”将 ExtJS 包含到您的页面中。针对调试版本运行时，控制台中的错误消息和回溯通常会更具描述性。