You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.6 KiB
121 lines
3.6 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>dojox.grid.Grid in Layout Demo</title> |
|
|
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/themes/tundra/tundra.css"; |
|
@import "../resources/Grid.css"; |
|
@import "../resources/tundraGrid.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" |
|
data-dojo-config="parseOnLoad: true, isDebug: false"></script> |
|
|
|
<script type="text/javascript"> |
|
dojo.require("dijit.dijit"); |
|
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.DataGrid"); |
|
dojo.require("dojo.data.ItemFileWriteStore"); |
|
|
|
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"> |
|
var layout = [[ |
|
{name: 'Column 1', field: 'col1'}, |
|
{name: 'Column 2', field: 'col2'}, |
|
{name: 'Column 3', field: 'col3'}, |
|
{name: 'Column 4', field: 'col4', width: "150px"}, |
|
{name: 'Column 5', field: 'col5'} |
|
],[ |
|
{name: 'Column 6', field: 'col6'}, |
|
{name: 'Column 7', field: 'col7'}, |
|
{name: 'Column 8'}, |
|
{name: 'Column 9', field: 'col3', colSpan: 2} |
|
]]; |
|
var layout2 = [ |
|
{name: 'Alpha', field: 'col1'}, |
|
{name: 'Beta', field: 'col2'}, |
|
{name: 'Gamma', field: 'col3'}, |
|
{name: 'Delta', field: 'col4', width: "150px"}, |
|
{name: 'Epsilon', field: 'col5'}, |
|
{name: 'Nexilon', field: 'col6'}, |
|
{name: 'Zeta', field: 'col7'}, |
|
{name: 'Eta', field: 'col1'}, |
|
{name: 'Omega', field: 'col8'} |
|
]; |
|
// |
|
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="false" |
|
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="false" |
|
sizeMin="50" sizeShare="80" |
|
> |
|
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" sizeMin="20" sizeShare="70"> |
|
<div id="grid1" dojoType="dojox.grid.DataGrid" store="test_store" structure="layout" title="Tab 1"></div> |
|
<div id="grid2" dojoType="dojox.grid.DataGrid" store="test_store" structure="layout2" title="Tab 2"></div> |
|
</div> |
|
<div id="bottomRight" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="30"> |
|
<div id="grid3" dojoType="dojox.grid.DataGrid" store="test_store" structure="layout2"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|