JSFiddle - React, Tailwind, and code Playground

by knokit

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

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/on",
         "dojo/aspect",
         "dojo/store/Observable",
         "dojo/store/Memory",
         "dijit/registry",
         "dijit/form/Button",
         "dijit/layout/ContentPane",
         "dgrid/OnDemandGrid",
         "dgrid/extensions/DijitRegistry",
         "dojo/domReady!"
        ],

function (declare, on, aspect, Observable, Memory, registry, Button, ContentPane, Grid, DijitRegistry) {
    var MyGrid = declare(null, {
        constructor: function (divId, pane) {

            var memStore = new Memory();
            this.myStore = new Observable( memStore );
            //var oldQuery = this.memoryStore.query;
            /*this.memoryStore.query = function(query, options){
                console.log("query", query, options);
                return oldQuery.call(this, query, options);
            };*/
            
            // adding items to memoryStore
            for(var i=0; i<500; i++){
                this.myStore.add({ id: i, name: divId + " - " + i });
            }

            
            // add logging to store get
			aspect.after(this.myStore, "query", function(arguments){
		        console.log("query: ", arguments);
                return arguments;
		    });
            
            
            // create grid
            this.grid = new declare([Grid, DijitRegistry])({
                store: this.myStore,
                columns: {
                    id: "ID",
                    name: "Name"
                }
            });
            pane.addChild(this.grid);
            // start grid
            this.grid.startup();

            this.grid.on('dgrid-refresh-complete', function(evt){
                console.log("Grid refreshed:", evt);
            });
            
            this.grid.on('dgrid-error', function(evt){
                console.log("error:", evt.error);
            });

        }
    });
    
    
    var x = 0;
    var myButton = new Button({
            label: "New...