dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
96 lines (93 loc) • 3.74 kB
HTML
<html>
<head>
<title>Test Menus plugin of dojox.grid.EnhancedGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel=stylesheet href="support/common.css"/>
<style type="text/css">
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0.5em;
}
#grid1, #grid2 {
width: 85.2em;
height: 50em;
}
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
</script>
<script type="text/javascript" src="../support/test_data.js"></script>
<script type="text/javascript">
var layout = [[
{name: 'Column 1', field: 'id'},
{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', field: 'col5'}
]];
dojo.addOnLoad(function(){
var grid = new dojox.grid.EnhancedGrid({
id: "grid2",
store: test_store,
structure: layout,
rowSelector: '20px',
plugins : {menus:{headerMenu:"headerMenu", rowMenu:"rowMenu", cellMenu:"cellMenu", selectedRegionMenu:"selectedRegionMenu"},
indirectSelection: {headerSelector:true, name: "Selection", width: "60px", styles: "text-align: center;"}
}
}, dojo.byId('gridDiv'));
grid.startup();
});
</script>
</head>
<body class="claro">
<h1 class="title">dojox.grid.EnhancedGrid - Menus</h1>
<p>
<div id="grid1" dojoType="dojox.grid.EnhancedGrid" query="{ id: '*' }" rowsPerPage="30"
plugins='{menus:{headerMenu:"headerMenu", rowMenu:"rowMenu", cellMenu:"cellMenu", selectedRegionMenu:"selectedRegionMenu"}}'
store="test_store" structure="layout" rowSelector="20px">
<div dojoType="dijit.Menu" id="headerMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Header Menu Item 1</div>
<div dojoType="dijit.MenuItem">Header Menu Item 2</div>
<div dojoType="dijit.MenuItem">Header Menu Item 3</div>
<div dojoType="dijit.MenuItem">Header Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Row Menu Item 1</div>
<div dojoType="dijit.MenuItem">Row Menu Item 2</div>
<div dojoType="dijit.MenuItem">Row Menu Item 3</div>
<div dojoType="dijit.MenuItem">Row Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="cellMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Cell Menu Item 1</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 2</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 3</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="selectedRegionMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Action 1 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 2 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 3 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 4 for Selected Region</div>
</div>
</div>
</p>
<p>
<div id="gridDiv"></div>
</p>
</body>
</html>