diff options
Diffstat (limited to 'includes/js/dojox/grid/tests/test_grid_layout.html')
-rw-r--r-- | includes/js/dojox/grid/tests/test_grid_layout.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/includes/js/dojox/grid/tests/test_grid_layout.html b/includes/js/dojox/grid/tests/test_grid_layout.html new file mode 100644 index 0000000..148025d --- /dev/null +++ b/includes/js/dojox/grid/tests/test_grid_layout.html @@ -0,0 +1,112 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.Grid in Layout Demo</title> + <style type="text/css"> + @import "../_grid/Grid.css"; + @import "../_grid/tundraGrid.css"; + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + + html, body{ + width: 100%; /* make the body expand to fill the visible window */ + height: 100%; + padding: 0 0 0 0; + margin: 0 0 0 0; + overflow: hidden; + } + .dijitSplitPane{ + margin: 5px; + } + + /* make grid containers overflow hidden */ + body .dijitContentPane { + overflow: hidden; + } + #rightPane { + margin: 0; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: false"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.layout.LayoutContainer"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dijit.layout.LinkPane"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dijit.layout.TabContainer"); + + dojo.require("dojox.grid.Grid"); + + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> + <script type="text/javascript" src="support/test_data.js"></script> + <script type="text/javascript"> + // a grid view is a group of columns + var view1 = { + cells: [[ + {name: 'Column 0'}, {name: 'Column 1'}, {name: 'Column 2'}, {name: 'Column 3', width: "150px"}, {name: 'Column 4'} + ],[ + {name: 'Column 5'}, {name: 'Column 6'}, {name: 'Column 7'}, {name: 'Column 8', field: 3, colSpan: 2} + ]] + }; + // a grid layout is an array of views. + var layout = [ view1 ]; + var layout2 = [ { + cells: [[ + {name: 'Alpha'}, {name: 'Beta'}, {name: 'Gamma'}, {name: 'Delta', width: "150px"}, {name: 'Epsilon'}, {name: 'Nexilon'}, {name: 'Zeta'}, {name: 'Eta', field: 0}, {name: 'Omega' } + ]] + } + ]; + // + dojo.addOnLoad(function(){ + dijit.byId("grid3").update(); + }); + </script> +</head> +<body class="tundra"> + <div id="outer" dojoType="dijit.layout.LayoutContainer" + style="width: 100%; height: 100%;"> + <div id="topBar" dojoType="dijit.layout.ContentPane" layoutAlign="top" + style="background-color: #274383; color: white;"> + top bar + </div> + <div id="bottomBar" dojoType="dijit.layout.ContentPane" layoutAlign="bottom" + style="background-color: #274383; color: white;"> + bottom bar + </div> + <div id="horizontalSplit" dojoType="dijit.layout.SplitContainer" + orientation="horizontal" + sizerWidth="5" + activeSizing="0" + layoutAlign="client" + > + <div id="leftPane" dojoType="dijit.layout.ContentPane" + sizeMin="20" sizeShare="20"> + Left side + </div> + + <div id="rightPane" + dojoType="dijit.layout.SplitContainer" + orientation="vertical" + sizerWidth="5" + activeSizing="0" + sizeMin="50" sizeShare="80" + > + <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" sizeMin="20" sizeShare="70"> + <div id="grid1" dojoType="dojox.Grid" model="model" title="Tab 1"></div> + <div id="grid2" dojoType="dojox.Grid" model="model" structure="layout2" title="Tab 2"></div> + </div> + <div id="bottomRight" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="30"> + <div id="grid3" dojoType="dojox.Grid" model="model" structure="layout2"></div> + </div> + </div> + </div> + </div> +</body> +</html> |