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

我已将我的存储配置为：

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();

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

我在

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未定义。

我缺少什么

编辑

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

试试这个商店：

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

---

您的商店声明自己具有以下字段：

• 身份证
• 头衔
• 发布年份
• 评级

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

• 电影识别码
• 头衔
• 描述
• 发布年份
• 评级
• 特色

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

一个选项是将商店的字段定义更改为：

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

您还需要对列定义进行相应的修改：

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

另一个选项是向存储中的字段定义添加映射：

store.load();

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

---

---

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

假设您正在运行ExtJS 4，请按以下方式定义存储：

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

---

它应该很简单。

idProperty

的默认值是

id

，您还没有设置其他属性。因此，存储查找不存在的

id

字段

这应该行得通

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

---

像这样声明它在功能上等同于OP-1.仅供参考，我复制了您的代码，并在ExtJS 3.3.1上运行了它，它按预期运行。没有发现错误。我建议您检查PHP代码。确保返回的JSON干净有效。在我看来，JSON似乎是以某种方式硬编码的。在

json\u encode

中，有些空格看起来不太自然。我没有测试您的代码，但在我的代码中，缺少了reader。另外，我使用的是ExtJS4，但我的示例代码是针对旧版本的。因此，将你的答案标记为有效！