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

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

ID
标题
RELEASE_YEAR
等级

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

film_id
标题
描述
RELEASE_YEAR
等级
special_features

您的错误可能是由网格查找数据中不存在的“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包含到您的页面中。在针对调试版本运行时，控制台中的错误消息和回溯通常会更具描述性。

Answer 2

应该很简单。 idProperty的默认值为id，您尚未设置其他值。因此，商店会查找不存在的id字段。

应该有效

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

Answer 3

假设您正在运行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']
});

Answer 4

尝试使用此商店：

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

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

4 个答案: