errore griglia di ExtJS, i dati JSON non viene visualizzata

Question

Ho configurato il mio negozio come:

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

e quindi definito la mia griglia come:

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

poi ho caricare il negozio:

store.load(); 

Sto facendo tutto questo nel metodo Ext.onReady. I dati che voglio visualizzare vengono recuperati da un file php che è della forma seguente:

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

Quando la pagina viene caricata, la griglia continua a mostrare la maschera di carico ed i dati non è mai mostrato. Inoltre, ottengo l'errore a is undefined. Cosa mi manca?

Modifica

ho scoperto che c'è qualche problema di percorso durante l'assegnazione di URL per memorizzare, ma ancora non in grado di risolvere. Il mio file "gridData.php", il file JS e il file HTML in cui viene visualizzata la griglia, si trovano nella stessa cartella e sono su "localhost/myapp". Per favore aiuto!

Answer 1

Supponendo che si sta eseguendo ExtJS 4 definire il tuo negozio come questo:

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

provare con questo negozio:

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

Answer 3

Il tuo negozio si dichiara di avere questi campi:

• id
• titolo
• RELEASE_YEAR
• voto

Tuttavia, le righe dei tuoi dati JSON contengono questi campi:

• film_id
• titolo
• descrizione
• RELEASE_YEAR
• voto
• special_features

Il tuo errore è probabilmente causato dalla griglia alla ricerca di a n 'id' campo che non esiste nei dati.

Una possibilità è quella di cambiare la definizione di campo del negozio per:

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

Si sarebbe anche bisogno di fare una corrispondente alterazione alla definizione di colonna:

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

Un'altra opzione è quella di aggiungere una mappatura nella definizione del campo nel negozio:

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

---

Inoltre, suggerisco che durante lo sviluppo di includere ExtJS nella vostra pagina utilizzando 'ext-all-debug.js' invece di 'ext-all.js'. I messaggi di errore e i backtrace nella console di solito sono molto più descrittivi quando si esegue contro la build di debug.

Answer 4

Dovrebbe essere semplice. Il valore predefinito di idProperty è id e non è stato impostato un altro. Così il negozio sembra per un campo id che non esiste.

che dovrebbe funzionare

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