JSFiddle - React, Tailwind, and code Playground
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("dijit.form.Button");
dojo.require("dojox.layout.TableContainer");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function() {
var _this = this;
console.log("----0----",_this);
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 programmatic = new dojox.layout.TableContainer();
var pane1 = new dijit.TitlePane({
title: 'Pane 1',
open: false,
toggle: function() {
var self = this;
self.inherited('toggle', arguments);
self._setContent(self.onDownloadStart(), true);
if (!self.open) {
return;
}
var programmatic1 = new dojox.layout.TableContainer();
var myButton = new dijit.form.Button({
label: "Click me!",
onClick: function(){
}
});
programmatic1.addChild(myButton);
pane1.set('content', programmatic1.domNode);
}
});
var pane2 = new dijit.TitlePane({
title: 'Pane 2',
open: false
});
programmatic.addChild(pane1);
programmatic.addChild(pane2);
pane.set('content', programmatic.domNode);
// pane.set('content', pane1.domNode);
//...