Dojo EnhancedGrid editable problem
I'm having problem with making my dojo EnhancedGrid editable. Currently, I can double click the grid cells and I can change the value, but the moment I press enter again or try to leave the cells (i.e. to save the new value to the grid), I received the "assertion failed in ItemFileWriteStore" error in my firebug.
Below is my source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/Grid.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/claroGrid.css";
.dojoxGrid table { margin: 0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.cells._base");
dojo.addOnLoad(function() {
var layoutabc =
[[
{
field: "title",
name: "TitleofMovie",
width: "300px",
editable: true
},
{
field: "year",
name: "Year开发者_如何学Go",
width: "200px",
editable: true
},
{
field: "producer",
name: "Producer",
width: "auto",
editable: true,
type: dojox.grid.cells.Cell
}
]];
var mystore = new dojo.data.ItemFileWriteStore({
url: "movies.json"
});
// create a new grid:
var grid = new dojox.grid.EnhancedGrid(
{
query: {},
store: mystore,
structure: layoutabc
},
document.createElement("div")
);
dojo.byId("gridDiv").appendChild(grid.domNode);
grid.startup();
});
</script>
</head>
<body class="claro">
<div id="gridDiv" style="width: 800px; height: 400px;">
</div>
</body>
And this is the content of my movies.json (the content of data is weird, I know):
{
items:
[
{
title: "Africa",
year: "continent",
producer: "Katia Lund"
},
{
title: "Kenya",
year: "country",
producer: "Christine Jeffs"
},
{
title: "Mombasa",
year: "city",
producer: "Ridley Scott"
}
]
}
Problem solved. Turns out I need to define the "plugins" attribute for the EnhancedGrid object even though it is just an empty object. Once that is defined it works properly.
I think the problem is that your store does not contain any identifier so when the grid tries to write to the store, it does not have any way to know which entry it should write to.
I would start by editing the response for movies.json, perhaps like this:
{
identifier:"id",
items:
[
{
id:1
title: "Africa",
year: "continent",
producer: "Katia Lund"
},
{
id:2
title: "Kenya",
year: "country",
producer: "Christine Jeffs"
},
{
id:3
title: "Mombasa",
year: "city",
producer: "Ridley Scott"
}
]
}
Note that you don't have to include the id field in the layout list, it will be accessible to the grid anyway. Also, as identifier implies, it must be a unique value for each item in the store, otherwise it will fail to initialize.
加载中,请稍侯......
精彩评论