Skip to content

Instantly share code, notes, and snippets.

/dijit_layout_programmatic.html

Created January 5, 2014 20:09
Show Gist options
  • Save anonymous/8273129 to your computer and use it in GitHub Desktop.
Save anonymous/8273129 to your computer and use it in GitHub Desktop.
Download ZIP
When declaring dGrid with DijitRegistry, editors are not destroyed on dgrid.destroy(). Behaviour will change, when DijitRegistry extension is removed... in editor.js there is some testing for editOn parameter (line #497), which is in this case null... so column.editorInstance.destroyRecursive() is not fired. Wiki says (https://github.com/SitePen…
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(){
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");
tc.removeChild(gridTab1);
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"));
};
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