Skip to content

Instantly share code, notes, and snippets.

@treasonx

treasonx/dijit_layout_programmatic.html

Forked from anonymous/dijit_layout_programmatic.html
Last active January 3, 2016 05:49
Show Gist options
  • Save treasonx/8418685 to your computer and use it in GitHub Desktop.
Save treasonx/8418685 to your computer and use it in GitHub Desktop.
Download ZIP
Fixed errors in handling of child widget removed from grid on destroy.
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment