<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="../dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.addOnLoad(function() {
/*set up data store*/
var data = {
identifier: 'id',
items: []
};
var data_list = [{
col1: "normal",
col2: false,
col3: 'But are not followed by two hexadecimal',
col4: 29.91
},
{
col1: "important",
col2: false,
col3: 'Because a % sign always indicates',
col4: 9.33
},
{
col1: "important",
col2: false,
col3: 'Signs can be selectively',
col4: 19.34
}];
var rows = 200;
for (var i = 0, l = data_list.length; i < rows; i++) {
data.items.push(dojo.mixin({
id: i + 1
},
data_list[i % l]));
}
var store = new dojo.data.ItemFileWriteStore({
data: data
});
/*set up layout*/
var layout = [
[{
name: 'Column 1',
field: 'id'
},
{
name: 'Column 2',
field: 'col2'
},
{
name: 'Column 3',
field: 'col3',
width: "230px"
},
{
name: 'Column 4',
field: 'col4'
}]];
/*create a new grid:*/
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
grid.startup();
});
</script>
<link rel="stylesheet" type="text/css" href="../dijit/themes/claro/claro.css"
/>
<style type="text/css">
@import "../dojo/resources/dojo.css";
@import "../dijit/themes/claro/claro.css";
@import "../dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "../dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
/*Grid need a explicit width/height by default*/ #grid { width: 43em; height:
20em; }
</style>
</head>
<body class=" claro ">
<div id="gridDiv">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
