How to resolve the issue Cannot read property 'domNode' of undefined

2043
10
10-21-2020 08:26 AM
MichelTurmel
New Contributor III

I am trying to replicate the code in "Need simple example: add tabs to widget" on GeoNet  but I get: TypeError: Cannot read property 'domNode' of undefined
at Object._createTab (TabContainer.js?wab_dv=2.6:91)

 

Here are my files:

style.css:

.my-tab-node{
  position:absolute !important;
  width:100% !important;
  height:auto !important;
  top:0 !important;
  bottom:0 !important;
}

Widget.html:

<div>
  <div data-dojo-attach-point="tabIdentify">
    <div class="my-tab-node" data-dojo-attach-point="tabNode1">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>
    <div class="my-tab-node" data-dojo-attach-point="tabNode2">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>
  </div>
</div>

Widget.js:

define(['dojo/_base/declare',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
        'jimu/dijit/TabContainer',
        'jimu/utils',
        'dojo/_base/lang',
        'dojo/on'],
  function(declare,
    _WidgetsInTemplateMixin,
    BaseWidget,
    TabContainer,
    utils,
    lang,
    on) {
    return declare([_WidgetsInTemplateMixinBaseWidget], {
      baseClass: "tab",

      postCreate: function() {
        this.inherited(arguments);
        console.log('postCreate');
      },

      startup: function() {
        this.inherited(arguments);
        console.log('startup');
        this._initTabContainer();      
      },

 


      _initTabContainer: function() {
        console.log('_initTabContainer');
        var tabs = [];
        tabs.push({
          title: 'Tab 1',
          content: this.tabNode1
        });
        tabs.push({
          title: 'Tab2',
          content: this.tabNode2
        });
        this.selTab = 'Tab 1';
        console.log('before new TabContainer');
        this.tabContainer = new TabContainer({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);
        console.log('before this.tabContainer.startup()')
        this.tabContainer.startup();
        this.own(on(this.tabContainer'tabChanged'lang.hitch(thisfunction(title) {
          if (title !== 'Tab 1') {
            //do something now that Tab 2 has been selected
          }
        })));
        utils.setVerticalCenter(this.tabContainer.domNode);
      }
    });
  });

Based on the console.log messages that I have included in the above code, it dies in the following section:

this.tabContainer = new TabContainer({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);

Would you have any suggestions on how I could resolve this?

10 Replies
MichelTurmel
New Contributor III

Thank you for your reply Robert,

I have used your Identify 2.5 widget code and I have commented out everything except the code that creates the tab. I will try to add all my code in the striped down version. 

0 Kudos