Listing 2. Simple Data Grid

<html>
<head>
  <title>Simple Data Grid</title>

  <link rel="stylesheet" type="text/css" href=
  "http://o.aolcdn.com/dojo/1.2/dojo/resources/dojo.css"/>
  <link rel="stylesheet" type="text/css" href=
  "http://o.aolcdn.com/dojo/1.2/dijit/themes/tundra/tundra.css"/>
  <link rel="stylesheet" type="text/css" href=
  "http://o.aolcdn.com/dojo/1.2/dojox/grid/resources/Grid.css"/>
  <link rel="stylesheet" type="text/css" href=
  "http://o.aolcdn.com/dojo/1.2/dojox/grid/resources/tundraGrid.css"/>

  <style type="text/css">
    #gridNode {
      width: 200px;
     height: 200px;
    }
  </style>

  <script type="text/javascript"
          src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js">
  </script>

  <script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.grid.DataGrid");

    dojo.addOnLoad(
      function() {
        /* Create a store with inline JavaScript data */
        var gridStore = new dojo.data.ItemFileReadStore({
          data : {
            identifier : "id",
            items      : [
                          {"id" : 1, "label" : "foo"},
                          {"id" : 2, "label" : "bar"},
                          {"id" : 3, "label" : "baz"}
            ]
          }
        });

        /* A simple layout that specifies column headers and
         * mappings to fields in the store */
        var gridLayout = [
                {name : "ID",    field : "id",    width : "50%"},
                {name : "Label", field : "label", width : "50%"}
        ];

        /* Programmatically construct a data grid */
        var grid = new dojox.grid.DataGrid({
                           store     : gridStore,
                           structure : gridLayout
                   }, "gridNode");

        /* Tell the grid to lay itself out since
         * it was programmatically constructed */
        grid.startup();
      });
</script>
</head>
<body class="tundra">
  <div id="gridNode"></div>
</body>
</html>

