source: Dev/trunk/src/client/dojox/grid/tests/test_sizing_100rows.html

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

Added Dojo 1.9.3 release.
File size: 4.2 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2        "http://www.w3.org/TR/html4/loose.dtd">
3<html>
4<head>
5        <title>dojox.grid.Grid Sizing Example</title>
6        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
7        <style type="text/css">
8                @import "../../../dojo/resources/dojo.css";
9                @import "../resources/Grid.css";
10                @import "../resources/tundraGrid.css";
11               
12                body {
13                        font-size: 0.9em;
14                        font-family: Geneva, Arial, Helvetica, sans-serif;
15                }
16                .heading {
17                        font-weight: bold;
18                        padding-bottom: 0.25em;
19                }
20               
21                #container {
22                        width: 400px;
23                        height: 200px;
24                        border: 4px double #333;
25                }
26                               
27                #grid {
28                        border: 1px solid #333;
29                }
30        </style>
31        <script type="text/javascript" src="../../../dojo/dojo.js"
32                data-dojo-config="isDebug: true, parseOnLoad: true"></script>
33        <script type="text/javascript">
34                dojo.require("dijit.dijit");
35                dojo.require("dojox.grid.DataGrid");
36                dojo.require("dojo.data.ItemFileWriteStore");
37                dojo.require("dojo.parser");
38        </script>
39        <script type="text/javascript" src="support/test_data.js"></script>
40        <script type="text/javascript">
41                var structure = [
42                        {
43                                noscroll: true,
44                                cells: [
45                                        {name: 'Column 1', field: 'col1'},
46                                        {name: 'Column 2', field: 'col2'}
47                                ]
48                        },
49                        [
50                                {name: 'Column 3', field: 'col3'},
51                                {name: 'Column 4', field: 'col4'},
52                                {name: 'Column 5', field: 'col5'},
53                                {name: 'Column 6', field: 'col6'},
54                                {name: 'Column 7', field: 'col7'}
55                        ]
56                ];
57
58                // get can return data for each cell of the grid
59                function get(inRowIndex) {
60                        return [this.index, inRowIndex].join(', ');
61                }
62               
63                function resizeInfo() {
64                        setTimeout(function() {
65                                dojo.byId('gridWidth').value = grid.domNode.clientWidth;
66                                dojo.byId('gridHeight').value = grid.domNode.clientHeight;
67                        }, 1);
68                }
69               
70                function resizeGrid() {
71                        dojo.attr('autoHeight', false);
72                        dojo.attr('autoWidth', false);
73                        var
74                                w = Number(dojo.byId('gridWidth').value),
75                                h = Number(dojo.byId('gridHeight').value);
76                       
77                        dojo.contentBox(grid.domNode, {w: w, h: h});
78                        grid.update();
79                }
80               
81                function fitWidth() {
82                        dojo.attr('autoWidth', true);
83                        dojo.attr('autoHeight', false);
84                        grid.update();
85                }
86               
87                function fitHeight() {
88                        dojo.attr('autoWidth', false);
89                        dojo.attr('autoHeight', true);
90                        grid.update();
91                }
92               
93                function fitBoth() {
94                        dojo.attr('autoWidth', true);
95                        dojo.attr('autoHeight', true);
96                        grid.update();
97                }
98               
99                function sizeDefault() {
100                        dojo.attr('autoWidth', false);
101                        dojo.attr('autoHeight', false);
102                        grid.domNode.style.width = '';
103                        grid.domNode.style.height = 0;
104                        grid.update();
105                }
106               
107                dojo.addOnLoad(function() {
108                        dojo.byId('gridWidth').value = 500;
109                        dojo.byId('gridHeight').value = 200;
110                        dojo.connect(grid, 'update', resizeInfo);
111                        resizeGrid();
112                });
113        </script>
114</head>
115<body class="tundra">
116        <div class="heading">dojox.grid.Grid Sizing Test</div>
117        Grid width: <input id="gridWidth" type="text">&nbsp;
118        and height: <input id="gridHeight" type="text">&nbsp;
119        <button onclick="resizeGrid()">Resize Grid</button><br><br>
120        <button onclick="fitWidth()">Fit Data Width</button>&nbsp;
121        <button onclick="fitHeight()">Fit Data Height</button>&nbsp;
122        <button onclick="fitBoth()">Fit Data Width &amp; Height</button>
123        <button onclick="sizeDefault()">DefaultSize</button><br><br>
124        <div id="grid" data-dojo-id="grid" dojoType="dojox.grid.DataGrid"
125                autoWidth="true" autoHeight="true" store="test_store"
126                structure="structure" rowSelector="20px" elasticView="2"></div>
127       
128        <p>Grid fits to a sized container by default:</p>
129        <div id="container">
130                <div id="grid1" data-dojo-id="grid1" dojoType="dojox.grid._Grid"
131                        get="get" structure="structure" rowCount="10"
132                        rowSelector="20px" elasticView="2"></div>
133        </div>
134
135        <p> Grid is essentially hidden (height of zero) when parent container is unsized
136                (nothing, including the header, should be displayed):</p>
137        <div id="unsizedContainer">
138                <div id="grid2" dojoType="dojox.grid._Grid"
139                        get="get" structure="structure" rowCount="10"
140                        rowSelector="20px" elasticView="2"></div>
141        </div>
142
143        <p> Grid is autoHeight and autoWidth via markup</p>
144        <div id="grid3" dojoType="dojox.grid._Grid"
145                autoWidth="true" autoHeight="true" get="get"
146                structure="structure" rowCount="100" rowSelector="20px" elasticView="2"></div>
147</body>
148</html>
Note: See TracBrowser for help on using the repository browser.