How to locate buttons in a dojo dialog?

问题:

I'm in javascript and dojo. based on the my previous question about dialog with non underlay, I created a dialog. Now i want to add my buttons to the dialog. the button are dojo buttons and all of them are in . How can i locate these in my dialog ?

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>

回答1:

If you give a domNode to the content property of the dialog, dojo will place the node and start the widgets for you.

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>

回答2:

Easiest way seem to programm the html-code like this :

 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>";

before you define your dialog and then set the content of the Dialog with your variable like this :

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