<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Declarative Dijit Layout</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dijit/themes/claro/document.css";
|
@import "../css/dgrid.css";
|
@import "../../dijit/themes/claro/claro.css";
|
@import "../css/skins/claro.css";
|
html, body {
|
padding: 0;
|
width: 100%;
|
height: 100%;
|
}
|
#bc {
|
width: 99%;
|
height: 99%;
|
}
|
.bcLeft {
|
width: 300px;
|
}
|
.dijitDialog {
|
width: 500px;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
// callbacks for button clicks
|
function showDeclDialog(){ dlgDecl.show(); }
|
|
// function to get a unique set of column definitions for each grid
|
function getGridCols(){
|
return {
|
col1: 'Column 1',
|
col2: {name: 'Column 2', sortable: false},
|
col3: 'Column 3',
|
col4: 'Column 4'
|
};
|
}
|
|
require(["dojo/parser",
|
"dgrid/test/data/testStore",
|
// widgets only used declaratively
|
"dijit/Dialog",
|
"dijit/layout/BorderContainer",
|
"dijit/layout/TabContainer",
|
"dijit/Toolbar",
|
"dijit/form/Button",
|
"dgrid/OnDemandGrid",
|
"dgrid/extensions/DijitRegistry",
|
// non-returns
|
"dojo/domReady!"
|
], function(parser, testStore){
|
window.testStore = testStore;
|
parser.parse();
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<div data-dojo-type="dijit/layout/BorderContainer" id="bc">
|
<div data-dojo-type="dijit/Toolbar" class="bcTop"
|
data-dojo-props="id:'tbTop', region:'top'">
|
<span data-dojo-type="dijit/form/Button"
|
data-dojo-props="onClick: showDeclDialog">
|
Show declarative dialog
|
</span>
|
</div>
|
<!-- left: dgrid as direct child -->
|
<div id="gridBCCP" class="bcLeft"
|
data-dojo-type="dgrid/OnDemandGrid"
|
data-dojo-mixins="dgrid/extensions/DijitRegistry"
|
data-dojo-props="region: 'left', splitter: true, collection: testStore, columns: getGridCols()">
|
</div>
|
<!-- center: tabcontainer -->
|
<div data-dojo-type="dijit/layout/TabContainer" class="bcCenter" id="tc"
|
data-dojo-props="region: 'center'">
|
<!-- initial tab: dgrid as direct child -->
|
<div id="gridTab1" class="gridTab"
|
data-dojo-type="dgrid/OnDemandGrid"
|
data-dojo-mixins="dgrid/extensions/DijitRegistry"
|
data-dojo-props="title: 'Tab 1', collection: testStore, columns: getGridCols()">
|
</div>
|
<!-- tab 2: dgrid as direct child again, but not initially visible -->
|
<div id="gridTab2" class="gridTab"
|
data-dojo-type="dgrid/OnDemandGrid"
|
data-dojo-mixins="dgrid/extensions/DijitRegistry"
|
data-dojo-props="title: 'Tab 2', collection: testStore, columns: getGridCols()">
|
</div>
|
</div>
|
</div>
|
<!-- declarative dialog w/ dgrid inside -->
|
<div data-dojo-type="dijit/Dialog" id="dlgDecl" data-dojo-id="dlgDecl">
|
<div id="gridDlgDecl"
|
data-dojo-type="dgrid/OnDemandGrid"
|
data-dojo-mixins="dgrid/extensions/DijitRegistry"
|
data-dojo-props="collection: testStore, columns: getGridCols()"></div>
|
</div>
|
</body>
|
</html>
|
