Datagrid + tabcontainers

by psoares

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/claroGrid.css">
<div id="grid"></div>
<div id="r_tab_container"></div>

CSS

body, html {
    width : 100%;
    height : 100%;
}

#r_tab_container { width : 300px; height : 200px; }

JavaScript

require([
     "dijit/layout/BorderContainer",
     "dijit/layout/ContentPane",
     "dojox/grid/DataGrid",
     "dojo/data/ItemFileWriteStore",
     "dojo/dom",
     "dojo/domReady!"], function (BorderContainer, ContentPane, DataGrid, ItemFileWriteStore, dom) {
     // create a BorderContainer as the top widget in the hierarchy
     var bc = new BorderContainer({
         style: "height: 200px; width: 100%;"
     }, "grid");

     /*set up data store*/
     var data = {
         identifier: "id",
         items: []
     };


     data.items.push({
         id: 'some_id',
         description: 'some_description'
     });

     var store = new ItemFileWriteStore({
         data: data
     });

     /*set up layout*/
     var layout = [
         [{
             'name': 'Title',
                 'field': 'description',
                 'width': '200px',
                 'noresize': true
         }]
     ];

     /*create a new grid*/
     var grid = new DataGrid({
         region: "left",
         store: store,
         structure: layout,
         rowSelector: '0px',
         autoHeight: true,
         autoWidth: true
     });
         
     bc.addChild(grid);

     bc.startup();

     grid.on("rowclick", gridRowClick);

     function gridRowClick(evt) {

         require(["dijit/layout/TabContainer", "dijit/layout/ContentPane", "dijit/registry", "dojo/domReady!"],

         function (TabContainer, ContentPane, registry) {
             debugger;
             var tc = registry.byId("r_tab_container") || new TabContainer({
             }, "r_tab_container");

             var tcp = new ContentPane({
                 title: "foo",
                 content: "bar"
             });

             tc.addChild(tcp);

             tc.startup();
         
         });
     }
 });