Grid

by afarris

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/tundraGrid.css">
<div class="tundra">
    <div id="widget">
    <button id="viewToggle" style="float:right"></button>
    <table id="data1" style="display:none">
        <thead>
            <tr>
                <th>title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>second</td>
            </tr>
        </tbody>
    </table>        
    <div dojoType="dojox.data.HtmlStore" dataid="data1" jsId="data1Store"></div>
    <div id="contentContainer">
        <div class="cPane" title="First" style="width: 100%; height: 100px">
            <table jsId="grid" dojoType="dojox.grid.DataGrid" store="data1Store">
                <thead>
                    <tr>
                        <th field="title">Title</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="cPane" title="Second" style="width: 100%; height: 100px"><p>demo</p></div>
    </div>
</div>

JavaScript

dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.HtmlStore");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");

dojo.addOnLoad(function() {

    dojo.parser.parse("widget");
    
    var cc = dojo.byId("contentContainer");
    
    dojo.query(".cPane").forEach(function(n){
       new dijit.layout.ContentPane({
            title: dojo.attr(n, "title")
        }, n);
    });
    
    var dtc = new dijit.layout.TabContainer({
       style: "height:100px; width: 100%;"
    }, cc);
    
    dtc.startup();    
    
    var tabMode = true;
    
    
    new dijit.form.ToggleButton({
        showLabel: true,
        checked: false,
        onChange: function(val) {
            if (tabMode == true) {
                dojo.query(".cPane").forEach(function(n){
                    dtc.destroyDescendants(true);
                    dojo.parser.parse("tabWidget");

                    console.log('found contentPane');
                    new dijit.TitlePane({
                        title: dojo.attr(n, "title"), open: "true"
                    }, n), cc;
                });            
            }

        },
        label: "toggle"
    },
    "viewToggle");    

});