New file |
0,0 → 1,116 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
"http://www.w3.org/TR/html4/loose.dtd"> |
<html> |
<head> |
<title>dojox.Grid with Dojo.Data via binding</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> |
<style type="text/css"> |
@import "../_grid/tundraGrid.css"; |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/themes/tundra/tundra.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
|
#grid, #grid2, #grid3 { |
width: 65em; |
height: 25em; |
padding: 1px; |
} |
</style> |
<script type="text/javascript" src="../../../dojo/dojo.js" |
djConfig="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script> |
<script type="text/javascript"> |
dojo.require("dojox.grid.Grid"); |
dojo.require("dojox.grid._data.editors"); |
dojo.require("dojox.grid._data.model"); |
dojo.require("dojox.data.CsvStore"); |
dojo.require("dojo.data.ItemFileWriteStore"); |
dojo.require("dojo.parser"); |
</script> |
<script type="text/javascript"> |
function getRow(inRowIndex){ |
return ' ' + inRowIndex; |
} |
|
var iEditor = dojox.grid.editors.Input; |
var layoutMovies = [ |
// view 0 |
{ type: 'dojox.GridRowView', width: '20px' }, |
// view 1 |
{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true}, |
// view 2 |
{ cells: [[ |
{ field: "Title", editor: iEditor, width: 'auto' }, |
{ field: "Year", editor: iEditor, width: 5 }, |
{ field: "Producer", editor: iEditor, width: 20 } |
]]} |
]; |
|
var layoutCountries = [ |
// view 0 |
{ type: 'dojox.GridRowView', width: '20px' }, |
// view 1 |
{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true}, |
// view 2 |
{ cells: [[ |
{ field: "name", name: "Name", width: 'auto' }, |
{ field: "type", name: "Type", editor: iEditor, width: 'auto' }, |
]]} |
]; |
</script> |
</head> |
<body class="tundra"> |
<h1>dojox.Grid using Dojo.Data stores via simple binding</h1> |
<!-- |
<br> |
<span dojoType="dojox.data.CsvStore" |
jsId="csvStore" url="support/movies.csv"> |
</span> |
<span dojoType="dojox.grid.data.DojoData" |
jsId="dataModel" |
store="csvStore" |
rowsPerPage="5" |
query="{ Title: '*' }" |
clientSort="true"> |
</span> |
<div id="grid" dojoType="dojox.Grid" elasticView="2" |
model="dataModel" structure="layoutMovies"> |
</div> |
--> |
<br> |
<h3>Update some of the types</h3> |
<button onclick="updateCountryTypes();">Go!</button> |
<script> |
function updateCountryTypes(){ |
// get everything starting with "A" |
jsonStore.fetch({ |
query: { name: "A*" }, |
onComplete: function(items, result){ |
// change 'em! |
dojo.forEach(items, function(item){ |
jsonStore.setValue(item, "type", "thinger"); |
// console.debug(item); |
}); |
} |
}); |
} |
</script> |
|
<span dojoType="dojo.data.ItemFileWriteStore" |
jsId="jsonStore" url="../../../dijit/tests/_data/countries.json"> |
</span> |
<span dojoType="dojox.grid.data.DojoData" |
jsId="dataModel2" |
rowsPerPage="20" |
store="jsonStore" |
clientSort="true" |
query="{ name : '*' }"> |
</span> |
<div id="grid2" dojoType="dojox.Grid" elasticView="2" |
model="dataModel2" structure="layoutCountries"> |
</div> |
|
<div id="grid3" dojoType="dojox.Grid" elasticView="2" |
model="dataModel2" structure="layoutCountries"> |
</div> |
</body> |
</html> |