title: Adding content to dijit Dialog
body: <p>I've looked at quite a few links for people trying to add content / change the template for a Dojo Dialog. <a href="http://dojo-toolkit.33424.n3.nabble.com/How-to-extend-dijit-Dialog-td2738779.html" rel="nofollow">This was the most promising.</a></p>
  
  <p>However, whenever I do something like this:</p>
  
  <p>Dialog declared in HTML:</p>
  
  <pre><code>&lt;div class="djDialog" id="dgViewer" data-dojo-type="TemplatedDialog" data-dojo-props="title: 'My Dialog', draggable:false"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Dialog Template: </p>
  
  <pre><code>&lt;div class="dijitDialog" role="dialog" aria-labelledby="${id}_title"&gt;
      &lt;div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar"&gt;
          &lt;span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"&gt;&lt;/span&gt;
          &lt;span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1"&gt;
              &lt;span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}"&gt;x&lt;/span&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- containerNode from original Dialog template --&gt;
      &lt;div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent"&gt;
          &lt;!-- All "custom" content --&gt;
          &lt;div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:300px"&gt;
              &lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"&gt;
  
              &lt;/div&gt;
              &lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'"&gt;
                  &lt;button data-dojo-type="dijit.form.Button"&gt;Edit&lt;/button&gt;
                  &lt;button data-dojo-type="dijit.form.Button"&gt;Status&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- End "custom" content --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Custom Dialog class:</p>
  
  <pre><code>define([
      'dojo/_base/declare',
      'dijit/Dialog', 
      'dijit/_TemplatedMixin',
      'dojo/text!./dialog_templates/View.html'], 
      function(
          declare, 
          Dialog, 
          _Mixin,
          _template){
      return declare('TemplatedDialog', [Dialog, _Mixin], {    
          templateString : _template,
          constructor : function(){
  
          }
      })
  })
  </code></pre>
  
  <p>In my console (using Chrome) I just see:</p>
  
  <pre><code>&lt;div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto; "&gt;&lt;/div&gt;
  </code></pre>
  
  <p>... and empty node where content <em>should</em> be.  </p>
  
  <p>So far I haven't found anyone who seems to have successfully extended dijit.Dialog in terms of templates.  Is this possible?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>After trying some variations on this template:</p>
  
  <pre><code>&lt;div class="dijitDialog" role="dialog" aria-labelledby="${id}_title"&gt;
      &lt;div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar"&gt;
          &lt;span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"&gt;&lt;/span&gt;
          &lt;span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button" tabIndex="-1"&gt;
              &lt;span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}"&gt;x&lt;/span&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- containerNode from original Dialog template --&gt;
      &lt;div class="dijitDialogPaneContent"&gt;
          &lt;div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:100%;width:100%"&gt;
              &lt;div data-dojo-attach-point="containerNode" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"&gt;
              &lt;button data-dojo-type="dijit.form.Button"&gt;Edit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The error <code>Uncaught TypeError: Cannot read property '0' of undefined</code> is being thrown.  This is the stack, if it helps.  I'm using the uncompressed version from the Google CDN to help in debugging.</p>
  
  <pre><code>_childElements          dojo.js.uncompressed.js:8341
  getStepQueryFunc        dojo.js.uncompressed.js:8597
  query                   dojo.js.uncompressed.js:9005
  query                   dojo.js.uncompressed.js:5248
  _2._checkIfSingleChild  _ContentPaneResizeMixin.js:2
  _4._size                Dialog.js:2
  _4.show                 Dialog.js:2
  </code></pre>
  
  <p>Removing the <code>data-dojo-type</code> and <code>-props</code> from the <code>containerNode</code> resolves this, but it's still not getting things closer to having a working custom templated Dialog.</p>