wangdaping
/
wp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!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>