New file |
0,0 → 1,139 |
<!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/Grid.css"; |
body { |
font-size: 1em; |
font-family: Geneva, Arial, Helvetica, sans-serif; |
} |
|
#grid { |
width: 65em; |
height: 25em; |
padding: 1px; |
} |
</style> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> |
<script type="text/javascript"> |
dojo.require("dojo.data.ItemFileReadStore"); |
dojo.require("dojox.data.CsvStore"); |
/*dojo.require("dojox.grid.Grid"); |
dojo.require("dojox.grid._data.model"); |
dojo.require("dojo.parser");*/ |
</script> |
<!-- Debugging --> |
<script type="text/javascript" src="../_grid/lib.js"></script> |
<script type="text/javascript" src="../_grid/drag.js"></script> |
<script type="text/javascript" src="../_grid/scroller.js"></script> |
<script type="text/javascript" src="../_grid/builder.js"></script> |
<script type="text/javascript" src="../_grid/cell.js"></script> |
<script type="text/javascript" src="../_grid/layout.js"></script> |
<script type="text/javascript" src="../_grid/rows.js"></script> |
<script type="text/javascript" src="../_grid/focus.js"></script> |
<script type="text/javascript" src="../_grid/selection.js"></script> |
<script type="text/javascript" src="../_grid/edit.js"></script> |
<script type="text/javascript" src="../_grid/view.js"></script> |
<script type="text/javascript" src="../_grid/views.js"></script> |
<script type="text/javascript" src="../_grid/rowbar.js"></script> |
<script type="text/javascript" src="../_grid/publicEvents.js"></script> |
<script type="text/javascript" src="../VirtualGrid.js"></script> |
<script type="text/javascript" src="../_data/fields.js"></script> |
<script type="text/javascript" src="../_data/model.js"></script> |
<script type="text/javascript" src="../_data/editors.js"></script> |
<script type="text/javascript" src="../Grid.js"></script> |
<script type="text/javascript"> |
dojox.grid.data.HashMixin = { |
getFieldName: function(inIndex){ |
var n = this.fields.get(inIndex); |
return (n)&&(n.name); |
}, |
_get: function(inRowIndex, inColIndex){ |
var row = this.data[inRowIndex]; |
var n = this.getFieldName(inColIndex); |
return (inColIndex == undefined || !n ? row : row[n]); |
}, |
getDatum: function(inRowIndex, inColIndex){ |
return this._get(inRowIndex, inColIndex); |
}, |
getRow: function(inRowIndex){ |
return this._get(inRowIndex); |
}, |
setDatum: function(inDatum, inRowIndex, inColIndex){ |
var n = this.getFieldName(inColIndex); |
if(n){ |
this.data[inRowIndex][n] = inDatum; |
} |
}, |
// get items based on field names |
createComparator: function(inField, inIndex, inSubCompare){ |
return function(a, b){ |
var c = inField.name; |
var ineq = inField.compare(a[c], b[c]); |
return (ineq ? (inIndex > 0 ? ineq : -ineq) : (inSubCompare && inSubCompare(a, b))); |
} |
}, |
makeComparator: function(inIndices){ |
var result = null; |
for(var i=inIndices.length-1, col; i>=0; i--){ |
col = Math.abs(inIndices[i]) - 1; |
if(col >= 0){ |
result = this.createComparator(this.fields.get(col), inIndices[i], result); |
} |
} |
return result; |
} |
} |
|
dojo.declare("dojox.grid.data.Itemhash", dojox.grid.data.table, dojox.grid.data.HashMixin); |
|
function getRow(inRowIndex){ |
return ' ' + inRowIndex; |
} |
|
var layout2 = [ |
{ type: 'dojox.GridRowView', width: '20px' }, |
{ cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true}, |
{ cells: [[ |
{ name: "Title", field: 0 }, |
{ name: "Year", field: 1, width: 20 }, |
{ name: "Producer", field: 2, width: 'auto' } |
]]} |
]; |
|
updateGrid = function(inItems, inResult){ |
//var m = new dojox.grid.data.table(null, csvStore._dataArray); |
var m = new dojox.grid.data.Itemhash(); |
var f = csvStore.getAttributes(inItems[0]); |
var i = 0; |
var fields = []; |
dojo.forEach(f, function(a) { |
fields.push({name: a}); |
}); |
m.fields.set(fields); |
model = m; |
dojo.forEach(inItems, function(item) { |
var row = {}; |
dojo.forEach(fields, function(a) { |
row[a.name] = csvStore.getValue(item, a.name)||""; |
}); |
m.setRow(row, i++); |
}); |
grid.setModel(m); |
} |
|
|
dojo.addOnLoad(function(){ |
csvStore = new dojox.data.CsvStore({url:"support/movies.csv"}); |
csvStore.fetch({ onComplete: updateGrid, onError: function() { console.log(arguments)}}); |
}); |
</script> |
</head> |
<body> |
<h5>dojox.Grid using Dojo.Data stores via simple binding</h5> |
<div jsId="grid" dojoType="dojox.Grid" |
elasticView="2" structure="layout2"></div> |
</body> |
</html> |