Dojo OnDemandGrid (dgrid) with ObjectStore (Local json)
質問
What is wrong with this code? I can get my json and debug it with alert (so that part works with xhr)... so for example, if I do this within the function (of xhr), alert(data[0].name) I get the correct value. There's not much example neither on the web... but specifying the columns and adding the object store doesn't show anything... Basically, I just want to load some json file (locally) and render it on the grid, but I will eventually use REST to handle CRUD within my application (So, I will be using JsonRest in a near future).
I think it had to do also with AJAX... I should probably put sync to true (since it seems my global variable doesn,t work properly... undefined).
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dgrid/OnDemandGrid",
"dojo/_base/xhr",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dgrid/Keyboard",
"dgrid/Selection"
], function(
declare,
_WidgetBase,
Grid,
xhr,
Memory,
ObjectStore,
Keyboard,
Selection
){
var dataStore;
xhr.get({
url: "app/resources/data/content.json",
handleAs: "json"
}).then(function(data){
dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) });
});
return declare([_WidgetBase, Grid, Keyboard, Selection], {
store: dataStore,
columns:{
name: { label: "name" },
autodelete: { label: "autodelete" },
groupe_id: { label: "groupe_id" },
global: { label: "global" },
date: { label: "date" },
duree: { label: "duree" },
description: { label: "description" },
fichier: { label: "fichier" },
pleinecran: { label: "pleinecran" },
repertoire: { label: "repertoire" },
taille: { label: "taille" },
expiration: { label: "expiration" },
id: { label: "id" },
catergorie: { label: "catergorie" },
brouillon: { label: "brouillon" }
},
postCreate: function() {
}
});
});
解決
For some reason, I just can't pass a objectStore to a store (for dgrid - onDemandGrid). I separated my "data model" and my viewer this time. So, I have this in app/models (for instance, my code is pretty modular):
define([
"dojo/_base/xhr",
"dojo/store/Memory",
"dojo/store/Observable"],
function(
xhr,
Memory,
Observable
){
xhr.get({
url: "app/resources/data/content.json",
handleAs: "json",
sync: true,
}).then(function(data){
contentStore = Observable(Memory({data: data}));
});
// global var "song_store"
return contentStore;
});
Finally, I generate my grid like this by attaching my store to it (app/ui/layout/ContentGrid).
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dgrid/OnDemandGrid",
"dgrid/Keyboard",
"dgrid/Selection",
"dgrid/extensions/ColumnHider",
"dgrid/editor",
"app/models/content"
], function(
declare,
_WidgetBase,
Grid,
xhr,
Memory,
ObjectStore,
Keyboard,
Selection,
Hider,
editor
){
return declare([Grid, Keyboard, Selection, Hider], {
store: contentStore,
/*columns: {
selected: editor({
label: " ",
autoSave: true,
sortable: false
}, "checkbox"),
Name: "Name",
Time: "Duration",
Year: "Year",
Artist: "Artist",
Album: "Album",
Genre: "Genre"
},*/
columns: {
selected: editor({
label: " ",
autoSave: true,
sortable: false
}, "checkbox"),
nom: "Name",
autodelete: "Auto-delete",
groupe_id: "Groupe ID",
global: "Global",
date: "Date",
duree: "Lenght",
description: "Description",
fichier: "Filename",
pleinecran: "Fullscreen",
repertoire: "Folder",
taille: "Size",
expiration: "Expired",
id: "id",
catergorie: "Category",
brouillon: "Example"
},
});
});