New file |
0,0 → 1,113 |
<!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("dojox.grid._data.model"); |
|
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> |