| <!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> |
