source: Dev/trunk/src/client/dojox/layout/tests/test_TableContainer.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 12.9 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4
5        <title>TableContainer layout widget Test</title>
6
7        <!-- required: a default theme file -->
8        <link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/tundra/tundra.css">
9        <link rel="stylesheet" href="../resources/ScrollPane.css">     
10
11        <!-- required: dojo.js -->
12        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true"></script>
13
14        <!-- do not use! only for testing dynamic themes -->
15        <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
16       
17        <script language="JavaScript" type="text/javascript">
18               
19                dojo.require("dijit.dijit");
20                dojo.require("dojox.layout.TableContainer");
21                dojo.require("dojo.parser");
22                dojo.require("dijit.form.TextBox");
23                dojo.require("dijit.form.NumberTextBox");
24                dojo.require("dijit.form.NumberSpinner");
25                dojo.require("dijit.form.CheckBox");
26                dojo.require("dijit.layout.BorderContainer");
27                dojo.require("dijit.layout.ContentPane");
28                dojo.require("dojox.form.DateTextBox");
29               
30                dojo.ready(function(){
31                        dojo.parser.parse();
32                       
33                        var programmatic = new dojox.layout.TableContainer(
34                                {
35                                        cols: 2,
36                                        customClass:"greyLNF",
37                                        "labelWidth": "150"
38                                }, dojo.byId("programmatic"));
39                        var text1 = new dijit.form.TextBox({label: "ProgText 1"});
40                        var text2 = new dijit.form.TextBox({label: "ProgText 2"});
41                        var text3 = new dijit.form.TextBox({label: "ProgText 3"});
42                        var text4 = new dijit.form.TextBox({label: "ProgText 4"});
43                       
44                        programmatic.addChild(text1);
45                        programmatic.addChild(text2);
46                        programmatic.addChild(text3);
47                        programmatic.addChild(text4);
48                        programmatic.startup();
49                });
50        </script>
51        <style type="text/css">
52                @import "../../../dojo/resources/dojo.css";
53                @import "../../../dijit/tests/css/dijitTests.css";
54                @import "../../widget/Calendar/Calendar.css";
55
56                #altStyle .dojoxScrollHelper {
57                        -moz-border-radius:3pt;
58                        background:#b7cdee;
59                        border:2px solid #333;
60                        width:3px;
61                }
62                table.fooBar td {
63                        width:50px;
64                        border-right:2px solid #000;
65                        padding:20px;
66                }
67
68                #vertList li {
69                        cursor:pointer;
70                }
71                .foo { float:left; }
72                p.special { width:800px; }
73               
74                .dijitTableLayout label {
75                        font-weight: bold;
76                }
77               
78                .greyLNF-labelCell {
79                        background-color: lightgrey;
80                        padding-left: 5px;
81                }
82                .greyLNF-table-horiz .greyLNF-labelCell {
83                        text-align: right;
84                }
85                .greyLNF-valueCell {
86                        padding-left: 5px;
87                }
88                .innerLNF-table {
89                        background-color: lightblue;
90                }
91                .innerLNF-labelCell {
92                        padding-bottom: 2px;
93                        text-align: center;
94                }
95                .innerLNF-table-vert .innerLNF-labelCell {
96                        border-bottom: 1px solid black;
97                }
98                .innerLNF-valueCell {
99                        padding-top: 2px;
100                        text-align: center;
101                }
102                .greenLNF-labelCell {
103                        background-color: green;
104                        color: white;
105                        text-align: center;
106                }
107                .greenLNF-valueCell {
108                        color: blue;
109                        padding: 5px;
110                        text-align: center;
111                }
112                .greenLNF-valueCell-0 {
113                        width: 50%;
114                }
115                .greenLNF-valueCell-2 {
116                        width: 25%;
117                }
118                .greyBlueLNF-labelCell {
119                        background-color: lightgrey;
120                        padding-left: 5px;
121                }
122                .greyBlueLNF-table-horiz .greyBlueLNF-labelCell {
123                        text-align: right;
124                }
125                .greyBlueLNF-valueCell {
126                        padding-left: 5px;
127                        background-color: #D6E9F8;
128                }
129        </style>
130
131</head>
132<body class="tundra">
133
134        <h1 class='testTitle'>dojox.layout.TableContainer</h1>
135
136        <p>
137                A container that lays out child widgets in a set number of columns.
138          Each widget can have a 'label' or 'title' attribute which can
139                be configured to be displayed beside or above each widget.
140        </p>
141        <p>
142                The TableContainer has no default styling, as the base implementation
143                is designed to be a simple layout mechanism.  However you can style the
144                labels and value cells and rows very easily.  This page shows how four
145                different styling schemes, greyLNF, greyBlueLNF, greenLNF and innerLNF
146                can be applied to TableContainers.
147        </p>
148       
149        <h2>A simple single column layout, with labels in the default horizontal alignment:</h2>
150       
151        <div style="width: 500px; border: 1px solid black;">
152
153                <div dojoType="dojox.layout.TableContainer" cols="1" id="tc1">
154                        <div dojoType="dijit.form.TextBox" title="First Name:"></div>
155                        <div dojoType="dijit.form.TextBox" title="Last Name:"></div>
156                        <div dojoType="dijit.form.CheckBox" title="Employed"></div>
157                        <div dojoType="dijit.form.NumberSpinner" title="Age" value="30"></div>
158                </div>
159               
160        </div>
161        <h2>A two column layout, with labels in the default horizontal alignment, with custom styling:</h2>
162
163        <span dojoType="dojox.layout.TableContainer" cols="2" id="tc2"
164                        customClass="greyLNF" style="border: 1px solid black;width: 500px;">
165                <div dojoType="dijit.form.CheckBox" title="Married:"></div>
166                <div dojoType="dojox.form.DateTextBox" title="Date Of Birth:" value="1978-06-29"></div>
167                <div dojoType="dijit.form.CheckBox" title="Is Student:" checked="true"></div>
168                <div dojoType="dijit.form.TextBox" title="School Name:" value="University Of Limerick"></div>
169        </span>
170               
171
172        <h2>A three column nested layout with custom styles, that you can configure using the drop down controls below:</h2>
173        <div>
174                Notice the two nested TableContainers, highlighted in blue. 
175                One has the 'spanLabel' attribute set to "true"
176          so that it takes up both the value cell and the label cell.
177                The other has the label "Nested TableContainer" set.
178        </div>
179        <div>
180                This table also automatically changes the number of columns based on its width,
181                in order to maintain a minimum cell width.  Try resizing the screen to
182                see this in action.
183        </div>
184        Set the number of columns:
185        <select onchange="dijit.byId('tc3').attr('cols', this.value)">
186                <option value="1">1</option>
187                <option value="2">2</option>
188                <option value="3" selected>3</option>
189                <option value="4">4</option>
190        </select>
191        Set the label layout:
192        <select onchange="dijit.byId('tc3').attr('orientation', this.value)">
193                <option value="vert">Vertical</option>
194                <option value="horiz">Horizontal</option>
195        </select>
196        Set the custom CSS:
197        <select onchange="dijit.byId('tc3').attr('customClass', this.value)">
198                <option value="greyLNF">greyLNF</option>
199                <option value="greenLNF">greenLNF</option>
200        </select>
201        <br>
202        <br>
203        <div style="border: 1px solid black;" >
204
205                <div dojoType="dojox.layout.TableContainer" cols="3" id="tc3" orientation="vert" customClass="greyLNF">
206                        <script type="dojo/connect">
207                                // This code runs after the widget has been constructed.
208                                // It sets the number of columns used by the table based on the width
209                                // of the table.
210                               
211                                var _this = this;
212                                function resizeContainer(){
213                                  var width = dojo.style(_this.domNode, "width");
214                                        var numCols = 3;
215
216                                        if (width < 500) {
217                                          numCols = 1;
218                                        } else if (width < 800) {
219                                          numCols = 2;
220                                        }
221                                        if (_this.get("cols") != numCols) {
222                                          _this.set("cols", numCols);
223                                        }
224                                }
225                                var timer;
226                                dojo.connect(window, "onresize", dojo.hitch(this, function(){
227                                  if (timer) {
228                                          clearTimeout(timer);
229                                        }
230                                  timer = setTimeout(resizeContainer, 100); 
231                                }));
232                        </script>
233                       
234                        <div dojoType="dijit.form.CheckBox" title="Option 1" id="check1"></div>
235                        <div dojoType="dijit.form.CheckBox" title="Option 2" id="check2"></div>
236                        <div dojoType="dijit.form.TextBox" title="Text1" id="text1"></div>
237                        <div dojoType="dijit.form.NumberTextBox" title="Number" value="120"></div>
238
239                        <div dojoType="dijit.form.NumberSpinner" title="Number Spinner" value="100"></div>
240                        <div dojoType="dijit.layout.ContentPane" title="Content Pane">
241                                This is a ContentPane with a label
242                        </div>
243                        <div dojoType="dijit.layout.ContentPane" spanLabel="true">
244                                This is just some text that fills a couple of cells,
245                                look at it wrap around!!!!
246                        </div>
247                        <div dojoType="dojox.layout.TableContainer" cols="3" id="tc4"
248                                        orientation="vert"
249                                        spanLabel="true"
250                                        customClass="innerLNF"
251                                        spacing="0"
252                                        >
253                                               
254                                <div dojoType="dijit.form.CheckBox" title="Nested 1"></div>
255                                <div dojoType="dijit.form.CheckBox" title="Nested 2"></div>
256                                <div dojoType="dijit.form.CheckBox" title="Nested 3"></div>
257                        </div>
258                       
259                        <div    dojoType="dojox.layout.TableContainer"
260                                                cols="3" 
261                                                orientation="horiz"
262                                                customClass="innerLNF"
263                                                label="Nested TableContainer"
264                                                >
265                                <div dojoType="dijit.form.CheckBox" title="Horiz Label1"></div>
266                                <div dojoType="dijit.form.CheckBox" title="Horiz Label2"></div>
267                        </div>
268                </div>
269        </div>
270       
271        <div id="colspanTest">
272                <h2>This table tests the use of the 'colspan' attribute with labels enabled</h2>
273                <div dojoType="dojox.layout.TableContainer" cols="3" customClass="greyBlueLNF" labelWidth="-1">
274                        <script type="dojo/connect" data-dojo-event="startup">
275                                // Show the actual colspan in each cell
276                                dojo.query(".greyBlueLNF-valueCell", this.domNode).forEach(function(cell){
277                                  cell.firstChild.innerHTML += " - <i>actual colspan = " + dojo.attr(cell, "colspan") + "</i>";
278                                });
279                        </script>
280                       
281                        <div dojoType="dijit.layout.ContentPane" label="Label 1">colspan = 1</div>
282                        <div dojoType="dijit.layout.ContentPane" label="Label 1">colspan = 1</div>
283                        <div dojoType="dijit.layout.ContentPane" label="Label 1">colspan = 1</div>                      <div dojoType="dijit.layout.ContentPane" label="Label 2" colspan="2">colspan = 2</div>
284                        <div dojoType="dijit.layout.ContentPane" label="Label 3" colspan="2">colspan = 2</div>
285                        <div dojoType="dijit.layout.ContentPane" label="Label 4">colspan = 1</div>
286                        <div dojoType="dijit.layout.ContentPane" label="Label 5">colspan = 1</div>
287                        <div dojoType="dijit.layout.ContentPane" label="Label 6">colspan = 1</div>
288                        <div dojoType="dijit.layout.ContentPane" label="Label 7" colspan="3">colspan = 3</div>
289                        <div dojoType="dijit.layout.ContentPane" label="Label 8" colspan="4">colspan = 4 (just takes up 3)</div>
290                </div>
291               
292                <h2>This table tests the use of the 'colspan' attribute with labels disabled</h2>
293                <div dojoType="dojox.layout.TableContainer" cols="3" customClass="greyBlueLNF" labelWidth="-1" showLabels="false">
294                        <script type="dojo/connect" data-dojo-event="startup">
295                                // Show the actual colspan in each cell
296                                dojo.query(".greyBlueLNF-valueCell", this.domNode).forEach(function(cell){
297                                  cell.firstChild.innerHTML += " - <i>actual colspan = " + dojo.attr(cell, "colspan") + "</i>";
298                                });
299                        </script>
300                       
301                        <div dojoType="dijit.layout.ContentPane" label="Label 1">colspan = 1</div>
302                        <div dojoType="dijit.layout.ContentPane" label="Label 1">colspan = 1</div>
303                        <div dojoType="dijit.layout.ContentPane" label="Label 1">colspan = 1</div>
304                        <div dojoType="dijit.layout.ContentPane" label="Label 2" colspan="2">colspan = 2</div>
305                        <div dojoType="dijit.layout.ContentPane" label="Label 3" colspan="2">colspan = 2</div>
306                        <div dojoType="dijit.layout.ContentPane" label="Label 4">colspan = 1</div>
307                        <div dojoType="dijit.layout.ContentPane" label="Label 5">colspan = 1</div>
308                        <div dojoType="dijit.layout.ContentPane" label="Label 6">colspan = 1</div>
309                        <div dojoType="dijit.layout.ContentPane" label="Label 7" colspan="3">colspan = 3</div>
310                        <div dojoType="dijit.layout.ContentPane" label="Label 8" colspan="4">colspan = 4 (just takes up 3)</div>
311                </div>
312        </div>
313       
314        <h2>This is a programmatically created TableContainer</h2>
315        <br><br>
316        <div id="programmatic" style="width: 800px;">
317               
318        </div>
319
320        <h2>Test resize of the TableContainer</h2>
321        <p>Drag the splitter to resize the TableContainer in the right/center region and confirm the column widths resize correctly to their new width</p>
322        <div dojoType="dijit.layout.BorderContainer" style="height:100px; border: solid #ccc 1px;">
323                <div dojoType="dijit.layout.ContentPane" region="left" style="width:20%" splitter="true">(left)</div>
324                <div dojoType="dijit.layout.ContentPane" region="center">
325                        <div dojoType="dojox.layout.TableContainer" region="center" data-dojo-id="tblContainerResize" cols="3" customClass="greyBlueLNF" labelWidth="-1">
326                                <div dojoType="dijit.layout.ContentPane" label="Col 1 Label">
327                                        <script type="dojo/connect" data-dojo-event="resize">
328                                                this.domNode.innerHTML = "<strong>Width: " + dojo.contentBox(this.domNode).w + "</strong>";
329                                        </script>
330                                </div>
331                                <div dojoType="dijit.layout.ContentPane" label="Col 2 Label">
332                                        <script type="dojo/connect" data-dojo-event="resize">
333                                                this.domNode.innerHTML = "<strong>Width: " + dojo.contentBox(this.domNode).w + "</strong>";
334                                        </script>
335                                </div>
336                                <div dojoType="dijit.layout.BorderContainer" label="Col 1 Label" colspan="2" style="height: 50px">
337                                        <div dojoType="dijit.layout.ContentPane" region="left" style="width: 50%">
338                                                <script type="dojo/connect" data-dojo-event="resize">
339                                                        this.domNode.innerHTML = "<strong>Nested BC region width: " + dojo.contentBox(this.domNode).w + "</strong>";
340                                                </script>
341                                        </div>
342                                        <div dojoType="dijit.layout.ContentPane" region="center" style="width: 50%">
343                                                <script type="dojo/connect" data-dojo-event="resize">
344                                                        this.domNode.innerHTML = "<strong>Nested BC region width: " + dojo.contentBox(this.domNode).w + "</strong>";
345                                                        console.log(this.id + " resize");
346                                                </script>
347                                        </div>
348                                </div>
349                        </div>
350                </div>
351        </div>
352</body>
353</html>
Note: See TracBrowser for help on using the repository browser.