JSFiddle - React, Tailwind, and code Playground

by keemor

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<!--
Shows how to load data after pane is open, 
build grid and insert it into title pane
-->

JavaScript

dojo.require("dijit.TitlePane");
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function() {
    var pane = new dijit.TitlePane({
        title: 'Dynamic title pane',
        open: false,
        toggle: function() {
            var self = this;
            self.inherited('toggle', arguments);
            self._setContent(self.onDownloadStart(), true);
            if (!self.open) {
                return;
            }
            var xhr = dojo.xhrGet({
                url: '/echo/json/',
                load: function(r) {
                    var someData = [{
                        id: 1,
                        name: "One"},
                    {
                        id: 2,
                        name: "Two"}];

                    var store = dojo.data.ObjectStore({
                        objectStore: new dojo.store.Memory({
                            data: someData
                        })
                    });
                    var grid = new dojox.grid.DataGrid({
                        store: store,
                        structure: [{
                            name: "Name",
                            field: "name",
                            width: "200px"}],
                        autoHeight: true
                    });
                    //After inserting grid anywhere on page it gets height
                    //Without this line title pane doesn't resize after inserting grid                                                            
                    dojo.place(grid.domNode, dojo.body());
                    grid.startup();
                    self.set('content', grid.domNode);
                }
            });
        }
    });
    dojo.place(pane.domNode, dojo.body());
    pane.toggle();
});