Ticket #4900: test_grid_layout_2.html

File test_grid_layout_2.html, 3.7 kB (added by BryanForbes, 14 months ago)
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5        <title>dojox.Grid in Layout Demo</title>
6        <style type="text/css">
7                @import "../_grid/Grid.css";
8                @import "../_grid/tundraGrid.css";
9                @import "../../../dojo/resources/dojo.css";
10                @import "..../../dijit/tests/css/dijitTests.css";
11
12                html, body{     
13                        width: 100%;    /* make the body expand to fill the visible window */
14                        height: 100%;
15                        padding: 0 0 0 0;
16                        margin: 0 0 0 0;
17                        overflow: hidden;
18                }
19                .dijitSplitPane{
20                        margin: 5px;
21                }
22               
23                /* make grid containers overflow hidden */
24                body .dijitContentPane {
25                        overflow: hidden;
26                }
27                #rightPane {
28                        margin: 0;
29                }
30        </style>
31
32        <script type="text/javascript" src="../../../dojo/dojo.js"
33                djConfig="parseOnLoad: true, isDebug: false"></script>
34        <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
35
36        <script type="text/javascript">
37                dojo.require("dijit.layout.LayoutContainer");
38                dojo.require("dijit.layout.ContentPane");
39                dojo.require("dijit.layout.LinkPane");
40                dojo.require("dijit.layout.SplitContainer");
41                dojo.require("dijit.layout.TabContainer");
42               
43                dojo.require("dojox.grid.Grid");
44                dojo.require("dojox.grid._data.model");
45               
46                dojo.require("dojo.parser");    // scan page for widgets and instantiate them
47        </script>
48        <script type="text/javascript" src="support/test_data.js"></script>
49        <script type="text/javascript">
50                        // a grid view is a group of columns
51                        var view1 = {
52                                cells: [[
53                                        {name: 'Column 0'}, {name: 'Column 1'}, {name: 'Column 2'}, {name: 'Column 3', width: "150px"}, {name: 'Column 4'}
54                                ],[
55                                        {name: 'Column 5'}, {name: 'Column 6'}, {name: 'Column 7'}, {name: 'Column 8', field: 3, colSpan: 2}
56                                ]]
57                        };
58                        // a grid layout is an array of views.
59                        var layout = [ view1 ];
60                       
61                        var layout2 = [ {
62                                cells: [[
63                                        {name: 'Alpha'}, {name: 'Beta'}, {name: 'Gamma'}, {name: 'Delta', width: "150px"}, {name: 'Epsilon'}, {name: 'Nexilon'}, {name: 'Zeta'}, {name: 'Eta', field: 0}, {name: 'Omega' }
64                                ]]
65                        } ];
66                       
67                function initGridInLayout(g){
68                        // render initially since containers don't do this for some reason.
69                        var grid = dijit.byId(g);
70                        dojo.connect(grid, "onShow", function(){ setTimeout(function(){grid.render()}, 1); });
71                        grid.update();
72                }
73               
74                dojo.addOnLoad(function(){
75                        initGridInLayout("grid1");
76                        initGridInLayout("grid2");
77                        initGridInLayout("grid3");
78                });
79        </script>
80</head>
81<body class="tundra">
82        <div id="outer" dojoType="dijit.layout.LayoutContainer"
83                style="width: 100%; height: 100%;">
84                <div id="topBar" dojoType="dijit.layout.ContentPane" layoutAlign="top"
85                        style="background-color: #274383; color: white;">
86                        top bar
87                </div>
88                <div id="bottomBar" dojoType="dijit.layout.ContentPane" layoutAlign="bottom"
89                        style="background-color: #274383; color: white;">
90                        bottom bar
91                </div>
92                <div id="horizontalSplit" dojoType="dijit.layout.SplitContainer"
93                        orientation="horizontal"
94                        sizerWidth="5"
95                        activeSizing="0"
96                        layoutAlign="client"
97                >
98                        <div id="leftPane" dojoType="dijit.layout.ContentPane"
99                                 sizeMin="20" sizeShare="20">
100                                Left side
101                        </div>
102
103                        <div id="rightPane"
104                                dojoType="dijit.layout.SplitContainer"
105                                orientation="vertical"
106                                sizerWidth="5"
107                                activeSizing="0"
108                                sizeMin="50" sizeShare="80"
109                        >
110                                <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" sizeMin="20" sizeShare="70">
111                                        <div id="grid1" dojoType="dojox.Grid" model="model" title="Tab 1"></div>
112                                        <div id="grid2" dojoType="dojox.Grid" model="model" structure="layout2" title="Tab 2"></div>
113                                </div>
114                                <div id="bottomRight" dojoType="dijit.layout.LayoutContainer" sizeMin="20" sizeShare="30">
115                                        <div id="grid3" dojoType="dojox.Grid" model="model" structure="layout2"></div>
116                                </div>
117                        </div>
118                </div>
119        </div>
120</body>
121</html>