Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
<html>
3 
<head>
4 
	<title>dojox.Grid with Dojo.Data via binding</title>
5 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
6 
	<style type="text/css">
7 
		@import "../_grid/Grid.css";
8 
		body {
9 
			font-size: 1em;
10 
			font-family: Geneva, Arial, Helvetica, sans-serif;
11 
		}
12 
 
13 
		#grid {
14 
			width: 65em;
15 
			height: 25em;
16 
			padding: 1px;
17 
		}
18 
	</style>
19 
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
20 
<script type="text/javascript">
21 
	dojo.require("dojo.data.ItemFileReadStore");
22 
	dojo.require("dojox.data.CsvStore");
23 
	/*dojo.require("dojox.grid.Grid");
24 
	dojo.require("dojox.grid._data.model");
25 
	dojo.require("dojo.parser");*/
26 
</script>
27 
<!-- Debugging -->
28 
<script type="text/javascript" src="../_grid/lib.js"></script>
29 
<script type="text/javascript" src="../_grid/drag.js"></script>
30 
<script type="text/javascript" src="../_grid/scroller.js"></script>
31 
<script type="text/javascript" src="../_grid/builder.js"></script>
32 
<script type="text/javascript" src="../_grid/cell.js"></script>
33 
<script type="text/javascript" src="../_grid/layout.js"></script>
34 
<script type="text/javascript" src="../_grid/rows.js"></script>
35 
<script type="text/javascript" src="../_grid/focus.js"></script>
36 
<script type="text/javascript" src="../_grid/selection.js"></script>
37 
<script type="text/javascript" src="../_grid/edit.js"></script>
38 
<script type="text/javascript" src="../_grid/view.js"></script>
39 
<script type="text/javascript" src="../_grid/views.js"></script>
40 
<script type="text/javascript" src="../_grid/rowbar.js"></script>
41 
<script type="text/javascript" src="../_grid/publicEvents.js"></script>
42 
<script type="text/javascript" src="../VirtualGrid.js"></script>
43 
<script type="text/javascript" src="../_data/fields.js"></script>
44 
<script type="text/javascript" src="../_data/model.js"></script>
45 
<script type="text/javascript" src="../_data/editors.js"></script>
46 
<script type="text/javascript" src="../Grid.js"></script>
47 
<script type="text/javascript">
48 
	dojox.grid.data.HashMixin = {
49 
		getFieldName: function(inIndex){
50 
			var n = this.fields.get(inIndex);
51 
			return (n)&&(n.name);
52 
		},
53 
		_get: function(inRowIndex, inColIndex){
54 
			var row = this.data[inRowIndex];
55 
			var n = this.getFieldName(inColIndex);
56 
			return (inColIndex == undefined || !n ? row : row[n]);
57 
		},
58 
		getDatum: function(inRowIndex, inColIndex){
59 
			return this._get(inRowIndex, inColIndex);
60 
		},
61 
		getRow: function(inRowIndex){
62 
			return this._get(inRowIndex);
63 
		},
64 
		setDatum: function(inDatum, inRowIndex, inColIndex){
65 
			var n = this.getFieldName(inColIndex);
66 
			if(n){
67 
				this.data[inRowIndex][n] = inDatum;
68 
			}
69 
		},
70 
		// get items based on field names
71 
		createComparator: function(inField, inIndex, inSubCompare){
72 
			return function(a, b){
73 
				var c = inField.name;
74 
				var ineq = inField.compare(a[c], b[c]);
75 
				return (ineq ? (inIndex > 0 ? ineq : -ineq) : (inSubCompare && inSubCompare(a, b)));
76 
			}
77 
		},
78 
		makeComparator: function(inIndices){
79 
			var result = null;
80 
			for(var i=inIndices.length-1, col; i>=0; i--){
81 
				col = Math.abs(inIndices[i]) - 1;
82 
				if(col >= 0){
83 
					result = this.createComparator(this.fields.get(col), inIndices[i], result);
84 
				}
85 
			}
86 
			return result;
87 
		}
88 
	}
89 
 
90 
	dojo.declare("dojox.grid.data.Itemhash", dojox.grid.data.table, dojox.grid.data.HashMixin);
91 
 
92 
	function getRow(inRowIndex){
93 
		return ' ' + inRowIndex;
94 
	}
95 
 
96 
	var layout2 = [
97 
		{ type: 'dojox.GridRowView', width: '20px' },
98 
		{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
99 
		{ cells: [[
100 
			{ name: "Title", field: 0 },
101 
			{ name: "Year", field: 1, width: 20 },
102 
			{ name: "Producer", field: 2, width: 'auto' }
103 
		]]}
104 
	];
105 
 
106 
	updateGrid = function(inItems, inResult){
107 
		//var m = new dojox.grid.data.table(null, csvStore._dataArray);
108 
		var m = new dojox.grid.data.Itemhash();
109 
		var f = csvStore.getAttributes(inItems[0]);
110 
		var i = 0;
111 
		var fields = [];
112 
		dojo.forEach(f, function(a) {
113 
			fields.push({name: a});
114 
		});
115 
		m.fields.set(fields);
116 
		model = m;
117 
		dojo.forEach(inItems, function(item) {
118 
			var row = {};
119 
			dojo.forEach(fields, function(a) {
120 
				row[a.name] = csvStore.getValue(item, a.name)||"";
121 
			});
122 
			m.setRow(row, i++);
123 
		});
124 
		grid.setModel(m);
125 
	}
126 
 
127 
 
128 
	dojo.addOnLoad(function(){
129 
		csvStore = new dojox.data.CsvStore({url:"support/movies.csv"});
130 
		csvStore.fetch({ onComplete: updateGrid, onError: function() { console.log(arguments)}});
131 
	});
132 
</script>
133 
</head>
134 
<body>
135 
<h5>dojox.Grid using Dojo.Data stores via simple binding</h5>
136 
<div jsId="grid" dojoType="dojox.Grid"
137 
	elasticView="2" structure="layout2"></div>
138 
</body>
139 
</html>