Dojo Title Layout

by VENKATA VINAY BYSANI

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css">
<div data-dojo-type="dijit.layout.BorderContainer" id="borderContainer" style="height:100%;">
    <div data-dojo-type="dijit.TitlePane" region="top" id="titlePane" title="Title">
        <div>
            <label for="dtb1">ID :</label>
            <input id="dtb1" data-dojo-type="dijit/form/TextBox" />
        </div>
        <div>
            <label for="dtb2">Name :</label>
            <input id="dtb2" data-dojo-type="dijit/form/TextBox" />
        </div>
    </div>
    <div data-dojo-type="dijit.TitlePane" region="top" id="titlePane1" title="Title1">
        <div>
            <label for="dtb3">Email :</label>
            <input id="dtb3" data-dojo-type="dijit/form/TextBox" />
        </div>
        <div>
            <label for="dtb4">Address :</label>
            <input id="dtb4" data-dojo-type="dijit/form/TextBox" />
        </div>
    </div>
    <div data-dojo-type="dijit.layout.TabContainer" region="center" id="tabContainer">
        <div data-dojo-type="dijit.layout.ContentPane" id="contentPane" title="content" selected="true">Retrieve Form Fields Data:
            <button id="submit" type="button">Retrieve Data</button>
            <br/>Entered Values::
            <ul id="list"></ul>
        </div>
    </div>
</div>

CSS

html {
    height: 100%;
}
body {
    padding: 30px;
    height: 100%;
}

JavaScript

require(["dojo/parser", "dojo/on", "dojo/dom", "dojo/dom-construct",
    "dojo/query",
    "dijit/layout/BorderContainer",
    "dijit/TitlePane",
    "dijit/layout/TabContainer", "dojo/domReady!"],

function (parser, on, dom, domConstruct, query) {
    parser.parse();
    var myButton = dom.byId("submit");
    var listObj = dom.byId("list");
    on(myButton, "click", function (evt) {
        query("input").forEach(function (node) {
        domConstruct.create("li", {
            innerHTML: node.value
        }, list);
            
        });
    });
});