błąd siatki ExtJS, nie jest wyświetlane dane JSON

Question

mam skonfigurowany mój sklep jak:

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

a następnie definiuje moją siatkę jako:

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

następnie załadować do sklepu:

store.load(); 

Robię to wszystko w metodzie Ext.onReady. Dane, które chcę wyświetlić pobierana jest z pliku php, który ma następującą postać:

{ "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" } ] } 

Po załadowaniu strony, siatka utrzymuje przedstawiający maskę załadunku i dane nigdy nie jest pokazany. Ponadto pojawia się błąd a is undefined. Czego mi brakuje?

Edit

odkryłem, że istnieje jakiś problem podczas przypisywania ścieżka URL do przechowywania, ale nadal nie można rozwiązać. Mój plik "gridData.php", plik JS i plik HTML, w którym wyświetlana jest siatka, znajdują się w tym samym folderze i jestem na "localhost/myapp". Proszę pomóż!

Answer 1

Zakładając używasz ExtJS 4 zdefiniować swój sklep tak:

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 2

spróbować z tego sklepu:

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

Answer 3

Twój sklep deklaruje się mieć te pola:

• id
• Tytuł
• RELEASE_YEAR
• ocena

Jednak wiersze swoje dane JSON zawierają następujące pola:

• film_id
• Tytuł
• opis
• RELEASE_YEAR
• ocena
• special_features

Twój błąd jest prawdopodobnie spowodowane przez siatkę szukającą n 'id' pole, które nie istnieje w danych.

Jedną z opcji jest, aby zmienić definicję pola Twojego sklepu do:

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

będzie też trzeba dokonać odpowiedniej zmiany do definicji kolumna:

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

Inną opcją jest dodanie mapowania do definicji pola w sklepie:

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

---

Sugeruję również, aby podczas rozwijania programu dołączyć ExtJS do strony za pomocą "ext-all-debug.js" zamiast "ext-all.js". Komunikaty błędów i ślady śledzenia w konsoli będą zazwyczaj bardziej opisowe podczas działania przeciwko kompilacji debugowania.

Answer 4

To powinno być proste. Domyślna wartość idProperty to id i nie ustawiłeś innego. Dlatego sklep szuka nieistniejącego pola id.

który powinien działać

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