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

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

Added Dojo 1.9.3 release.
File size: 3.7 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 themes</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                @import "../resources/soriaGrid.css";
12                @import "../resources/nihiloGrid.css";
13                @import "../resources/claroGrid.css";
14               
15                #grid, #grid2, #grid3 {
16                        width: 65em;
17                        height: 25em;
18                        padding: 1px;
19                }
20        </style>
21        <script type="text/javascript" src="../../../dojo/dojo.js"
22                data-dojo-config="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script>
23        <script type="text/javascript">
24                dojo.require("dijit.dijit");
25                dojo.require("dojox.grid.DataGrid");
26                dojo.require("dojox.grid.EnhancedGrid");
27                dojo.require("dojo.data.ItemFileReadStore");
28                dojo.require("dojox.data.CsvStore");
29                dojo.require("dojo.parser");
30        </script>
31
32</head>
33<body>
34        <h5>dojox.grid.Grid structure from markup (tundra theme)</h5>
35        <span dojoType="dojox.data.CsvStore"
36                data-dojo-id="csvStore" url="support/movies.csv">
37        </span>
38
39        <table class="tundra" dojoType="dojox.grid.DataGrid"
40                store="csvStore"
41                query="{ Title: '*' }"
42                style="width: 800px; height: 300px;">
43                <thead>
44                        <tr>
45                                <th width="300px" field="Title">Title of Movie</th>
46
47                                <th width="5em" field="Year">Year</th>
48                        </tr>
49                        <tr>
50                                <th colspan="2" field="Producer">Producer</th>
51                        </tr>
52                </thead>
53        </table>
54
55        <span dojoType="dojo.data.ItemFileReadStore"
56                data-dojo-id="jsonStore" url="../../../dijit/tests/_data/countries.json">
57        </span>
58        <h5>Locked views specified with tables and colgroups (soria theme)</h5>
59
60        <table class="soria" dojoType="dojox.grid.DataGrid"
61                store="jsonStore"
62                rowsPerPage="20"
63                query="{ name: '*' }"
64                style="width: 600px; height: 300px;">
65                <colgroup span="1" noscroll="true" width="300px"></colgroup>
66                <colgroup span="4"></colgroup>
67                <thead>
68
69                        <tr>
70                                <th field="name" width="auto">Country/Continent Name</th>
71                                <th width="100px" field="population">Population</th>
72                                <th width="100px" field="area">Land Mass</th>
73                                <th width="100px" field="timezone">Time Zone</th>
74                                <th width="5em" field="type">Type</th>
75
76                        </tr>
77                </thead>
78        </table>
79       
80        <h5>Simple Claro DataGrid(currently an EnhancedGrid without any feature plugins)</h5>
81        <script type="text/javascript">
82                var layout = [{
83                        defaultCell: { width: 8, editable: false, type: dojox.grid.cells._Widget },
84                        rows:
85                        [
86                                { field: "Genre", width: '6'},
87                                { field: "Artist", width: '10'},
88                                { field: "Year", width: '6'},
89                                { field: "Album", width: '12'},
90                                { field: "Name", width: '17'},
91                                { field: "Length", width: '6'},
92                                { field: "Track", width: '6'},
93                                { field: "Composer", width: '15'}                               
94                        ]}
95                ];
96                var csvStore1 = new dojox.data.CsvStore({id:'csvStore1', url:"enhanced/support/music-for-demo.part.csv"});
97        </script>
98        <div class="claro" id="grid3" dojoType="dojox.grid.EnhancedGrid" query="{ Track: '*' }" rowsPerPage="30"
99                 store="csvStore1" structure="layout" rowSelector="0px">
100        </div>
101       
102
103        <script type="text/javascript">
104                var layoutCountries = [
105                        // view 1
106                        {
107                                noscroll: true,
108                                cells: [ new dojox.grid.cells.RowIndex({width: 5}) ]
109                        },
110                        // view 2
111                        {
112                                cells: [
113                                        { name: 'Country/Continent Name', field: 'name', width: 'auto' },
114                                        { name: 'Type', field: 'type', width: 8 }
115                                ]
116                        }
117                ];
118        </script>
119
120        <h5>A "regular" Grid from markup (no table defintion, nihilo theme)</h5>
121        <div class="nihilo" id="grid2" dojoType="dojox.grid.DataGrid" elasticView="2"
122                store="jsonStore" query="{ name: '*' }" rowSelector="20px" rowsPerPage="20" structure="layoutCountries">
123        </div>
124
125</body>
126</html>
Note: See TracBrowser for help on using the repository browser.