dojox.grid.DataGrid

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojox/grid/resources/Grid.css">
<div id="wrapper">
    <form id="myform">
        <div id="formContainer">
            <div class="row">
            <label>First Name</label>
                <input type="text" id="first" name="first" data-dojo-type="dijit/form/NumberTextBox" value="Thilakar" />
            </div>
            <div class="row">
            <label>Last Name</label>
                <input type="text" id="last" name="last" data-dojo-type="dijit/form/TextBox" value="Kathirvel" />
            </div>
            <div class="row">
            <label>DOB</label>
                <input type="text" id="dob" name="dob" data-dojo-type="dijit/form/TextBox" value="07/10/1983"/>
            </div>
            <div class="row">
            <label>City</label>
                <input type="text" id="city" name="city" data-dojo-type="dijit/form/TextBox" value="Chennai"/>
            </div>
            <div class="row">
            <label>State</label>
                <input type="text" id="state" name="state" data-dojo-type="dijit/form/TextBox" value="Tamilnadu"/>        
            </div>
            <div class="row">
            <label>Country</label>
            <input type="text" id="country" name="country" data-dojo-type="dijit.form.TextBox" value="India"/>
            </div>
            <div class="row">
            <label>Mobile</label>
                <input type="text" id="mobile" name="mobile" data-dojo-type="dijit/form/TextBox" value="9094730388"/>
            </div>
            <div class="row">
            <label>&nbsp;</label>
                <button type="submit" value="submit" data-dojo-type="dijit/form/Button" id="submitForm">Submit</button>
            </div>
        </div>
    </form>
    <h1>Saved Data</h1>
    <div id="gridDiv"></div>  
</div>

JavaScript

require([
    "dojo/_base/lang",      
    "dojo/dom", 
    "dojo/dom-construct", 
    "dojo/on", 
    "dijit/form/Form",
    "dijit/form/TextBox",
    "dijit/form/Button", 
    "dojox/grid/DataGrid", 
    "dojo/store/Memory",
    "dojo/data/ObjectStore", 
    "dojo/request", 
    "dijit/registry",
    "dojo/domReady!"
    ], function(lang, dom, domConstruct, on, Form, TextBox, Button, DataGrid, Memory, ObjectStore, request, registry){   
        var layout, dataStore, grid, form;

        /*set up layout*/
        layout = [
           {'name': 'First name', 'field': 'first', 'width': '100px'},
           {'name': 'Last Name', 'field': 'last', 'width': '100px'},
           {'name': 'DOB', 'field': 'dob', 'width': '200px'},
           {'name': 'City', 'field': 'city', 'width': '150px'},
           {'name': 'State', 'field': 'state', 'width': '150px'},
           {'name': 'Country', 'field': 'country', 'width': '150px'},
           {'name': 'Mobile', 'field': 'mobile', 'width': '150px'}
         ];
                      
        dataStore = new ObjectStore({ objectStore : new Memory() });
            
         /*create a new grid*/
         grid = new DataGrid({ 
             store: dataStore,
             query: { id: "*" },
             queryOptions: {},
             structure: layout               
         }, "gridDiv");

         /*Call startup() to render the grid*/
         grid.startup();
         form = new Form({
             onSubmit : function(evt) {
                 evt.preventDefault();
                 var formValue = this.get("value");
                 console.debug(formValue);
                 dataStore.newItem(formValue);
             }
         }, "formContainer");      
        form.startup();
});