html - ¿Cómo localizar botones en un diálogo dojo?

button

Question

Estoy en javascript y dojo. en base a la pregunta anterior sobre el diálogo sin subsuelo, creé un diálogo. Ahora quiero agregar mis botones al diálogo. el botón son botones de dojo y todos ellos están dentro ¿Cómo puedo ubicarlos en mi diálogo?

require(["dijit/Dialog", "dijit/DialogUnderlay", "dojo/domReady!"], function(Dialog, DialogUnderlay){
//just for the snippets to get the right styling
document.body.className = "tundra";
myDialog2 = new Dialog({
title: "My Dialog",
content: "Test content.",
style: "width: 300px"
});
showDialog2 = function () {
myDialog2.show().then(function() {
DialogUnderlay.hide()
//little hack to avoid JS error when closing the dialog
DialogUnderlay._singleton.bgIframe = {destroy: function() {}}
});
}
});

<button onclick="showDialog2();">show without underlay</button>
<div id="navtool" >
<div data-dojo-type="dijit/form/Button" id="zoomin" >Zoom In</div>
<div data-dojo-type="dijit/form/Button" id="zoomout" >Zoom Out</div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" >Full Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" >Prev Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" >Next Extent</div>
<div data-dojo-type="dijit/form/Button" id="pan" >Pan</div>
<div data-dojo-type="dijit/form/Button" id="deactivate" >Deactivate</div>
</div>

Answer 1

La manera más fácil parece programar el código html de esta manera:

 var setContent = "<div data-dojo-type="dijit/form/Button" id="zoomin" >Zoom In</div>";
setContent += "<div data-dojo-type="dijit/form/Button" id="zoomout" >Zoom Out</div>";
setContent += "<div data-dojo-type="dijit/form/Button" id="zoomfullext" >Full Extent</div>";

antes de definir su diálogo y luego establecer el contenido del cuadro de diálogo con su variable de esta manera:

 myDialog2 = new Dialog({
title: "My Dialog",
content: setContent ,
style: "width: 300px"
});

Answer 2

Si le da un domNode a la propiedad de content del dialog , dojo colocará el nodo e iniciará los widgets por usted.

require(["dijit/Dialog", "dijit/DialogUnderlay", "dojo/dom", "dojo/domReady!"], function(Dialog, DialogUnderlay, dom){
//just for the snippets to get the right styling
document.body.className = "tundra";
myDialog2 = new Dialog({
title: "My Dialog",
content: dom.byId(''navtool''),
style: "width: 300px"
});
showDialog2 = function () {
myDialog2.show().then(function() {
DialogUnderlay.hide()
//little hack to avoid JS error when closing the dialog
DialogUnderlay._singleton.bgIframe = {destroy: function() {}}
});
}
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<div id="navtool" >
<div data-dojo-type="dijit/form/Button" id="zoomin" >Zoom In</div>
<div data-dojo-type="dijit/form/Button" id="zoomout" >Zoom Out</div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" >Full Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" >Prev Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" >Next Extent</div>
<div data-dojo-type="dijit/form/Button" id="pan" >Pan</div>
<div data-dojo-type="dijit/form/Button" id="deactivate" >Deactivate</div>
</div>
<button onclick="showDialog2();">show without underlay</button>