title: Dojo : Inheriting/Extending templated widgets : How to?
body: <p>I've created a templated base widget called "Dialog", which I want to use as a core layout widget for all the other within the package. It's a simple container with couple of attach points. (I've not included HTML as it's quite straightforward) </p>
  
  <pre><code>define("my/Dialog",[
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/ready",
  "dojo/parser",
  "dojo/text!./Dialog.html"], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, ready, parser, template){
  
  return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
  
      templateString: template,
      widgetsInTemplate: true,
  
      title: 'Dialog',        
      content: null,
  
      constructor: function(args){
      },
  
      postCreate: function(){
          this.inherited(arguments);
      },
  
  
      ///
      /// Getters / Setters
      ///
  
      _setTitleAttr: function(title){
      },
  
      _setContentAttr: function(content){
          this._contentPane.innerHTML = content;
      }       
  });
  
  ready(function(){
      parser.parse();
  });});
  </code></pre>
  
  <p>Then I want to create another <strong>templated</strong> dialog that will inherit from this one, and will basically extend it in terms of kind-of-injecting the template into the content of the <strong>my/Dialog</strong> </p>
  
  <pre><code>define("my/BookmarksDialog",[
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/ready",
  "dojo/parser",
  "my/Dialog"], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, ready, parser, Dialog){
  
  return declare([Dialog, _WidgetsInTemplateMixin], {
  
      //templateString: template,
  
     template: '&lt;div data-dojo-attach-point="bookmarkpoint"&gt;something&lt;/div&gt;',
  
      widgetsInTemplate: true,
      content: template, // This works but doesn't parse the widgets within
      title: 'Bookmarks',
  
      constructor: function(args){
      },
  
  
      postCreate: function(){ 
          this.inherited(arguments);  
      }
  
  });
  
  ready(function(){
      parser.parse();
  });});
  </code></pre>
  
  <p>The problem I'm facing is that the attach point called <strong>bookmarkpoint</strong> is not accessible for the <strong>BookmarkDialog</strong></p>
  
  <p>So the question is:
  How do I get the BookmarkDialog template get parsed and placed in the Dialog widget?</p>
  
  <p>Options:</p>
  
  <ol>
  <li>Copy the template of the Dialog widget in to BookmarkWidget is
  not really an option,</li>
  <li>Instantiate the Dialog in the BookmarkWidget template is not much of an option either, as I don't want the Dialog to be under an attach point. I'd have to wrap all
  the methods of Dialog into BookmarkDialog to propagate correctly. </li>
  </ol>
  
  <p>Please note that I'm also firing the <strong>.startup()</strong> upon instantiating the widget.
  Thanks</p>