--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
+<html>\r
+<head>\r
+ <title>dojox.Grid Sizing Example</title>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>\r
+ <style type="text/css">\r
+ @import "../../../dojo/resources/dojo.css";\r
+ @import "../_grid/tundraGrid.css";\r
+ \r
+ body {\r
+ font-size: 0.9em;\r
+ font-family: Geneva, Arial, Helvetica, sans-serif;\r
+ }\r
+ .heading {\r
+ font-weight: bold;\r
+ padding-bottom: 0.25em;\r
+ }\r
+ \r
+ #container {\r
+ width: 400px;\r
+ height: 200px;\r
+ border: 4px double #333; \r
+ }\r
+ \r
+ #grid { \r
+ border: 1px solid #333;\r
+ }\r
+ </style>\r
+ <script type="text/javascript" src="../../../dojo/dojo.js" \r
+ djConfig="isDebug: true, parseOnLoad: true"></script>\r
+ <script type="text/javascript">\r
+ /*dojo.require("dojox.grid.Grid");\r
+ dojo.require("dojo.parser");*/\r
+ </script>\r
+ <!-- Debugging -->\r
+ <script type="text/javascript" src="../_grid/lib.js"></script>\r
+ <script type="text/javascript" src="../_grid/drag.js"></script>\r
+ <script type="text/javascript" src="../_grid/scroller.js"></script>\r
+ <script type="text/javascript" src="../_grid/builder.js"></script>\r
+ <script type="text/javascript" src="../_grid/cell.js"></script>\r
+ <script type="text/javascript" src="../_grid/layout.js"></script>\r
+ <script type="text/javascript" src="../_grid/rows.js"></script>\r
+ <script type="text/javascript" src="../_grid/focus.js"></script>\r
+ <script type="text/javascript" src="../_grid/selection.js"></script>\r
+ <script type="text/javascript" src="../_grid/edit.js"></script>\r
+ <script type="text/javascript" src="../_grid/view.js"></script>\r
+ <script type="text/javascript" src="../_grid/views.js"></script>\r
+ <script type="text/javascript" src="../_grid/rowbar.js"></script>\r
+ <script type="text/javascript" src="../_grid/publicEvents.js"></script>\r
+ <script type="text/javascript" src="../VirtualGrid.js"></script>\r
+ <script type="text/javascript" src="../_data/fields.js"></script>\r
+ <script type="text/javascript" src="../_data/model.js"></script>\r
+ <script type="text/javascript" src="../_data/editors.js"></script>\r
+ <script type="text/javascript" src="../Grid.js"></script>\r
+ <script type="text/javascript" src="support/test_data.js"></script>\r
+ <script type="text/javascript">\r
+ // grid structure\r
+ // a grid view is a group of columns\r
+ // a special view providing selection feedback\r
+ var rowBar = {type: 'dojox.GridRowView', width: '20px'};\r
+ \r
+ // a view without scrollbars\r
+ var leftView = {\r
+ noscroll: true,\r
+ cells: [[\r
+ {name: 'Column 0'},\r
+ {name: 'Column 1'}\r
+ ]]};\r
+ \r
+ var middleView = {\r
+ cells: [[\r
+ {name: 'Column 2'},\r
+ {name: 'Column 3'},\r
+ {name: 'Column 4'},\r
+ {name: 'Column 5'},\r
+ {name: 'Column 6'},\r
+ ]]};\r
+ \r
+ // a grid structure is an array of views.\r
+ var structure = [ rowBar, leftView, middleView];\r
+ \r
+ // get can return data for each cell of the grid\r
+ function get(inRowIndex) {\r
+ return [this.index, inRowIndex].join(', ');\r
+ }\r
+ \r
+ function resizeInfo() {\r
+ setTimeout(function() {\r
+ dojo.byId('gridWidth').value = grid.domNode.clientWidth;\r
+ dojo.byId('gridHeight').value = grid.domNode.clientHeight;\r
+ }, 1);\r
+ }\r
+ \r
+ function resizeGrid() {\r
+ grid.autoHeight = false;\r
+ grid.autoWidth = false;\r
+ var\r
+ w = Number(dojo.byId('gridWidth').value),\r
+ h = Number(dojo.byId('gridHeight').value);\r
+ \r
+ dojo.contentBox(grid.domNode, {w: w, h: h});\r
+ grid.update();\r
+ }\r
+ \r
+ function fitWidth() {\r
+ grid.autoWidth = true;\r
+ grid.autoHeight = false;\r
+ grid.update();\r
+ }\r
+ \r
+ function fitHeight() {\r
+ grid.autoWidth = false;\r
+ grid.autoHeight = true;\r
+ grid.update();\r
+ }\r
+ \r
+ function fitBoth() {\r
+ grid.autoWidth = true;\r
+ grid.autoHeight = true;\r
+ grid.update();\r
+ }\r
+ \r
+ function sizeDefault() {\r
+ grid.autoWidth = false;\r
+ grid.autoHeight = false;\r
+ grid.domNode.style.width = '';\r
+ grid.domNode.style.height = 0;\r
+ grid.update();\r
+ }\r
+ \r
+ dojo.addOnLoad(function() {\r
+ window["grid"] = dijit.byId("grid");\r
+ dojo.byId('gridWidth').value = 500;\r
+ dojo.byId('gridHeight').value = 200;\r
+ dojo.connect(grid, 'update', resizeInfo);\r
+ resizeGrid();\r
+ window["grid1"] = dijit.byId("grid1");\r
+ });\r
+ \r
+ \r
+</script>\r
+</head>\r
+<body class="tundra">\r
+<div class="heading">dojox.Grid Sizing Test</div>\r
+ Grid width: <input id="gridWidth" type="text"> \r
+ and height: <input id="gridHeight" type="text"> \r
+ <button onclick="resizeGrid()">Resize Grid</button><br><br>\r
+ <button onclick="fitWidth()">Fit Data Width</button> \r
+ <button onclick="fitHeight()">Fit Data Height</button> \r
+ <button onclick="fitBoth()">Fit Data Width & Height</button>\r
+ <button onclick="sizeDefault()">DefaultSize</button><br><br>\r
+ <div id="grid" dojoType="dojox.Grid" autoWidth="true" autoHeight="true" model="model" structure="structure" elasticView="2"></div>\r
+ \r
+ <p>Grid fits to a sized container by default:</p>\r
+ <div id="container">\r
+ <div id="grid1" dojoType="dojox.VirtualGrid" get="get" structure="structure" rowCount="10" elasticView="2"></div>\r
+ </div>\r
+\r
+ <p> Grid is essentially hidden (height of zero) when parent container is unsized \r
+ (nothing, including the header, should be displayed):</p>\r
+ <div id="unsizedContainer">\r
+ <div id="grid2" dojoType="dojox.VirtualGrid" get="get" structure="structure" rowCount="10" elasticView="2"></div>\r
+ </div>\r
+\r
+ <p> Grid is autoHeight and autoWidth via markup</p>\r
+ <div id="grid3" dojoType="dojox.VirtualGrid" autoWidth="true" autoHeight="true" get="get" structure="structure" rowCount="100" elasticView="2"></div>\r
+</body>\r
+</html>\r
projects / eow / blobdiff