Ошибка сетки 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

Ваш магазин заявляет, что имеет следующие поля:

• 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']

---

Кроме того, я предлагаю, чтобы при разработке вы включали ExtJS на свою страницу, используя «ext-all-debug.js» вместо «ext-all.js». Сообщения об ошибках и обратные следы в консоли, как правило, будут гораздо более наглядными при работе с отладочной сборкой.

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'
               }                       
     ]
});