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();
    });
});