New file |
0,0 → 1,154 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
<html> |
<head> |
<title>dojox.Grid Sizing Example</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../_grid/tundraGrid.css"; |
|
/* |
@import "../_grid/Grid.css"; |
body { |
font-size: 0.9em; |
font-family: Geneva, Arial, Helvetica, sans-serif; |
} |
*/ |
.heading { |
font-weight: bold; |
padding-bottom: 0.25em; |
} |
|
#container { |
width: 400px; |
height: 200px; |
border: 4px double #333; |
} |
|
#grid { |
border: 1px solid #333; |
} |
</style> |
<script type="text/javascript" src="../../../dojo/dojo.js" |
djConfig="isDebug:false, parseOnLoad: true"></script> |
<script type="text/javascript"> |
dojo.require("dojox.grid.Grid"); |
dojo.require("dojox.grid._data.model"); |
dojo.require("dojo.parser"); |
</script> |
<script type="text/javascript"> |
data = [ |
[ "normal", false, "new", 'But are not followed by two hexadecimal', 29.91, 10, false ], |
[ "important", false, "new", 'Because a % sign always indicates', 9.33, -5, false ], |
[ "important", false, "read", 'Signs can be selectively', 19.34, 0, true ], |
[ "note", false, "read", 'However the reserved characters', 15.63, 0, true ], |
[ "normal", false, "replied", 'It is therefore necessary', 24.22, 5.50, true ], |
[ "important", false, "replied", 'To problems of corruption by', 9.12, -3, true ], |
[ "note", false, "replied", 'Which would simply be awkward in', 12.15, -4, false ] |
]; |
model = new dojox.grid.data.table(null, data); |
|
// grid structure |
// a grid view is a group of columns |
// a special view providing selection feedback |
var rowBar = {type: 'dojox.GridRowView', width: '20px'}; |
|
// a view without scrollbars |
var leftView = { |
noscroll: true, |
cells: [[ |
{name: 'Column 0'}, |
{name: 'Column 1'} |
]]}; |
|
var middleView = { |
cells: [[ |
{name: 'Column 2'}, |
{name: 'Column 3'}, |
{name: 'Column 4'}, |
{name: 'Column 5'}, |
{name: 'Column 6'}, |
]]}; |
|
// a grid structure is an array of views. |
var structure = [ rowBar, leftView, middleView]; |
|
// get can return data for each cell of the grid |
function get(inRowIndex) { |
return [this.index, inRowIndex].join(', '); |
} |
|
function resizeInfo() { |
setTimeout(function() { |
dojo.byId('gridWidth').value = grid.domNode.clientWidth; |
dojo.byId('gridHeight').value = grid.domNode.clientHeight; |
}, 1); |
} |
|
function resizeGrid() { |
grid.autoHeight = false; |
grid.autoWidth = false; |
var |
w = Number(dojo.byId('gridWidth').value), |
h = Number(dojo.byId('gridHeight').value); |
|
dojo.contentBox(grid.domNode, {w: w, h: h}); |
grid.update(); |
} |
|
function fitWidth() { |
grid.autoWidth = true; |
grid.autoHeight = false; |
grid.update(); |
} |
|
function fitHeight() { |
grid.autoWidth = false; |
grid.autoHeight = true; |
grid.update(); |
} |
|
function fitBoth() { |
grid.autoWidth = true; |
grid.autoHeight = true; |
grid.update(); |
} |
|
function sizeDefault() { |
grid.autoWidth = false; |
grid.autoHeight = false; |
grid.domNode.style.width = ''; |
grid.domNode.style.height = 0; |
grid.update(); |
} |
|
dojo.addOnLoad(function() { |
window["grid"] = dijit.byId("grid"); |
dojo.byId('gridWidth').value = 500; |
dojo.byId('gridHeight').value = 200; |
dojo.connect(grid, 'update', resizeInfo); |
resizeGrid(); |
window["grid1"] = dijit.byId("grid1"); |
}); |
|
|
</script> |
</head> |
<body class="tundra"> |
<div class="heading">dojox.Grid Sizing Test</div> |
Grid width: <input id="gridWidth" type="text"> |
and height: <input id="gridHeight" type="text"> |
<button onclick="resizeGrid()">Resize Grid</button><br><br> |
<button onclick="fitWidth()">Fit Data Width</button> |
<button onclick="fitHeight()">Fit Data Height</button> |
<button onclick="fitBoth()">Fit Data Width & Height</button> |
<button onclick="sizeDefault()">DefaultSize</button><br><br> |
<div id="grid" dojoType="dojox.Grid" model="model" structure="structure" elasticView="2"></div> |
|
<p>Grid fits to a sized container by default:</p> |
<div id="container"> |
<div id="grid1" dojoType="dojox.VirtualGrid" get="get" structure="structure" rowCount="10" elasticView="2"></div> |
</div> |
|
</body> |
</html> |