Dojo-Tabs with counter

Dojo-Tabs for practices

by Lavakumar T

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
<body class="claro" style="padding: 40px 10px;">
  <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="tabPosition:'top'" style="width:100%;height:400px;">
    <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="title:'Cleint A', nested:true">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Info'">info A</div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Records'">Records A</div>
    </div>
    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="title:'Cleint B', nested:true">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Info'">
        <div>info B </div>
        <div data-dojo-type="Counter"></div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Records'">
        <div>Records B </div>
      </div>
    </div>
    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="title:'Cleint C', nested:true">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Info'">info C</div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Records'">Records C</div>
    </div>
  </div>
</body>

JavaScript

dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");

dojo.ready(function() {

});

require([
  "dojo/_base/declare", "dojo/dom-construct", "dojo/parser", "dojo/ready",
  "dijit/_WidgetBase",
], function(declare, domConstruct, parser, ready, _WidgetBase) {
  declare("Counter", [_WidgetBase], {
    // counter
    _i: 0,

    buildRendering: function() {
      this.domNode = domConstruct.create("button", {
        innerHTML: this._i
      });
    },
    postCreate: function() {
      this.connect(this.domNode, "onclick", "increment");
    },

    increment: function() {
      this.domNode.innerHTML = ++this._i;
    }
  });

  ready(function() {
    // Call the parser manually so it runs after our widget is defined, and page has finished loading
    parser.parse();
  });
});