treasonx/dijit_layout_programmatic.html

## dijit_layout_programmatic.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Programmatic Dijit Layout</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dijit/themes/claro/document.css";
			@import "../../dijit/themes/claro/claro.css";
			@import "../css/skins/claro.css";
			html, body {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
			}
			#bc {
				height: 100%;
			}

			.bcLeft {
				width: 300px;
			}

			.dijitDialog {
				width: 500px;
			}
		</style>
		<script src="../../dojo/dojo.js"
			data-dojo-config="async: true"></script>
		<script>
			// callbacks for button clicks
			function showProgContentDialog(){
				dlgProgContent.show();
				//dlgProgContent.content.startup(); //this is a workaround
			}

			require(["dgrid/OnDemandGrid",
				"dgrid/Selection",
				"dgrid/extensions/DijitRegistry",
				"dgrid/editor",
				"dijit/Dialog",
				"dojo/_base/lang",
				"dojo/_base/declare",
				"dijit/layout/BorderContainer",
				"dijit/layout/TabContainer",
				"dijit/Toolbar",
				"dijit/form/Button",
				"dijit/form/TextBox",
				"dgrid/test/data/base",
				"dojo/domReady!"
			], function(Grid, Selection, DijitRegistry, editor, Dialog, lang, declare, BC, TC, Toolbar, Button, TextBox, testStore){

				var
					gridCols = window.gridCols = {
						col1: {name: "Column 1"},
						col2: {name: "Column 2", sortable: false},
						col3: "Column 3",
						col4: "Column 4"
					},
					CustomGrid = declare([Grid, Selection, DijitRegistry]),
					gridLeft = new CustomGrid({
						id: "gridLeft",
						className: "bcLeft",
						store: testStore,
						columns: lang.clone(gridCols),
						selectionMode: "single",
						region: "left",
						splitter: true
					}),
					gridTab1 = new CustomGrid({
						id: "gridTab1",
						store: testStore,
						closable: true,
						columns: {
							col1: editor({name: "Column 1", editorArgs: {

								destroy: function(){
									this.inherited("destroy", arguments);
									console.log("editor destroy()");
								},

								postCreate: function(){
									this.inherited("postCreate", arguments);
									console.log(this.id);
								}
							}}, TextBox),
							col2: {name: "Column 2", sortable: false},
							col3: "Column 3",
							col4: "Column 4"
						},
						selectionMode: "single",
						title: "Tab 1"
					}),
					gridTab2 = new CustomGrid({
						id: "gridTab2",
						store: testStore,
						columns: lang.clone(gridCols),
						selectionMode: "single",
						title: "Tab 2"
					});

				var bc = new BC({
					design: "headline"
				}, "bc");

				// Toolbar
				var tb = new Toolbar({
					id: "tbTop",
					region: "top"
				});

				tb.addChild(new Button ({
					id: "btnDialog",
					label: "Programmatic dialog w/ dgrid",
					onClick: showProgContentDialog
				}));

				// TabContainer
				var tc = new TC({
					id: "tab",
					"class": "bcCenter",
					region: "center"
				});

				tc.addChild(gridTab1);
				tc.addChild(gridTab2);

				gridTab1.onClose = function(){
					console.log("on close");
					gridTab1.destroy();
					console.log("grid destroyed");
					console.log("Was first TextBox in grid 'gridTab1' destroyed? If yes, TextBox is not available in Registry and next value will be NULL:", dijit.registry.byId("dijit_form_TextBox_0"));
					return true;
				};

				bc.addChild(tb);
				bc.addChild(gridLeft);
				bc.addChild(tc);

				bc.startup();

				// test setting a dgrid as content of a dialog programmatically
				window.dlgProgContent = new Dialog({
					content: new CustomGrid({
						id: "gridDlgProgContent",
						store: testStore,
						columns: lang.clone(gridCols),
						selectionMode: "single"
					})
				});
			});
		</script>
	</head>
	<body class="claro">
		<div id="bc"></div>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test Programmatic Dijit Layout</title>
	<meta name="viewport" content="width=570">
	<style>
	@import "../../dijit/themes/claro/document.css";
	@import "../../dijit/themes/claro/claro.css";
	@import "../css/skins/claro.css";
	html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	}
	#bc {
	height: 100%;
	}

	.bcLeft {
	width: 300px;
	}

	.dijitDialog {
	width: 500px;
	}
	</style>
	<script src="../../dojo/dojo.js"
	data-dojo-config="async: true"></script>
	<script>
	// callbacks for button clicks
	function showProgContentDialog(){
	dlgProgContent.show();
	//dlgProgContent.content.startup(); //this is a workaround
	}

	require(["dgrid/OnDemandGrid",
	"dgrid/Selection",
	"dgrid/extensions/DijitRegistry",
	"dgrid/editor",
	"dijit/Dialog",
	"dojo/_base/lang",
	"dojo/_base/declare",
	"dijit/layout/BorderContainer",
	"dijit/layout/TabContainer",
	"dijit/Toolbar",
	"dijit/form/Button",
	"dijit/form/TextBox",
	"dgrid/test/data/base",
	"dojo/domReady!"
	], function(Grid, Selection, DijitRegistry, editor, Dialog, lang, declare, BC, TC, Toolbar, Button, TextBox, testStore){

	var
	gridCols = window.gridCols = {
	col1: {name: "Column 1"},
	col2: {name: "Column 2", sortable: false},
	col3: "Column 3",
	col4: "Column 4"
	},
	CustomGrid = declare([Grid, Selection, DijitRegistry]),
	gridLeft = new CustomGrid({
	id: "gridLeft",
	className: "bcLeft",
	store: testStore,
	columns: lang.clone(gridCols),
	selectionMode: "single",
	region: "left",
	splitter: true
	}),
	gridTab1 = new CustomGrid({
	id: "gridTab1",
	store: testStore,
	closable: true,
	columns: {
	col1: editor({name: "Column 1", editorArgs: {

	destroy: function(){
	this.inherited("destroy", arguments);
	console.log("editor destroy()");
	},

	postCreate: function(){
	this.inherited("postCreate", arguments);
	console.log(this.id);
	}
	}}, TextBox),
	col2: {name: "Column 2", sortable: false},
	col3: "Column 3",
	col4: "Column 4"
	},
	selectionMode: "single",
	title: "Tab 1"
	}),
	gridTab2 = new CustomGrid({
	id: "gridTab2",
	store: testStore,
	columns: lang.clone(gridCols),
	selectionMode: "single",
	title: "Tab 2"
	});

	var bc = new BC({
	design: "headline"
	}, "bc");

	// Toolbar
	var tb = new Toolbar({
	id: "tbTop",
	region: "top"
	});

	tb.addChild(new Button ({
	id: "btnDialog",
	label: "Programmatic dialog w/ dgrid",
	onClick: showProgContentDialog
	}));

	// TabContainer
	var tc = new TC({
	id: "tab",
	"class": "bcCenter",
	region: "center"
	});

	tc.addChild(gridTab1);
	tc.addChild(gridTab2);

	gridTab1.onClose = function(){
	console.log("on close");
	gridTab1.destroy();
	console.log("grid destroyed");
	console.log("Was first TextBox in grid 'gridTab1' destroyed? If yes, TextBox is not available in Registry and next value will be NULL:", dijit.registry.byId("dijit_form_TextBox_0"));
	return true;
	};

	bc.addChild(tb);
	bc.addChild(gridLeft);
	bc.addChild(tc);

	bc.startup();

	// test setting a dgrid as content of a dialog programmatically
	window.dlgProgContent = new Dialog({
	content: new CustomGrid({
	id: "gridDlgProgContent",
	store: testStore,
	columns: lang.clone(gridCols),
	selectionMode: "single"
	})
	});
	});
	</script>
	</head>
	<body class="claro">
	<div id="bc"></div>
	</body>
	</html>