JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script src="http://amd.egoworx.com/jsfiddle-dojo-require.js"></script>
<body class="claro">
<div id="tabCont" style="width: 600px; height: 450px;" data-dojo-type="dijit/layout/TabContainer"></div>
<br/>
<button id="progButtonNode" type="button"></button>
</body>
CSS
@import url('http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css');
@import url('http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css');
html, body {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 11px;
}
.grid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
}
JavaScript
require(["dojo/_base/declare",
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dojo/store/Cache",
"dojo/store/Memory",
//"dojo/store/JsonStore",
"dojo/data/ObjectStore",
"dijit/registry",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/NestedSorting",
"dojox/grid/enhanced/plugins/Selector",
"dojo/domReady!"
],
function (declare, dom, domConstruct, on, Cache, Memory, ObjectStore, registry, Button, ContentPane, EnhancedGrid) {
var MyGrid = declare(null, {
constructor: function (divId, pane) {
this.memoryStore = new Memory();
// adding items to memoryStore
for(var i=0; i<500; i++){
this.memoryStore.add({ id: i, name: divId + " - " + i });
}
this.dataStore = new ObjectStore({
objectStore: this.memoryStore//myStore,
});
on(this.dataStore, "Fetch", function(results){
console.log("["+divId+"] Fetching items from store:", results);
});
// create grid
this.grid = new EnhancedGrid({
store: this.dataStore,
height: '100%',
structure: [
{ field: 'id', name: "ID" },
{ field: 'name', name: "Name" },
{ field: 'address', name: "Address" }
],
plugins: {
nestedSorting: true,
selector: {
row: 'single'//,
//col: 'single',
//cell: 'single'
}
}
});
pane.addChild(this.grid);
// start grid
this.grid.startup();
}
});
var x = 0;
var...