/ext-4.1.0_b3/docs/extjs/examples/aria/aria-grid.html
HTML | 56 lines | 49 code | 5 blank | 2 comment | 0 complexity | fd14b051825d756ebfe6219eb0d6bc6e MD5 | raw file
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Stateful ARIA compliant Grid Example</title>
6 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all-access.css" />
7 <link rel="stylesheet" type="text/css" href="../shared/example.css" />
8
9 <!-- GC -->
10
11 <script type="text/javascript" src="../../ext-all.js"></script>
12
13 <!-- page specific -->
14 <style type="text/css">
15 /* style rows on mouseover */
16 .x-grid-row-over .x-grid-cell-inner {
17 font-weight: bold;
18 }
19 /* shared styles for the ActionColumn icons */
20 .x-action-col-cell img {
21 height: 16px;
22 width: 16px;
23 cursor: pointer;
24 }
25 /* custom icon for the "buy" ActionColumn icon */
26 .x-action-col-cell img.buy-col {
27 background-image: url(../shared/icons/fam/accept.png);
28 }
29 /* custom icon for the "alert" ActionColumn icon */
30 .x-action-col-cell img.alert-col {
31 background-image: url(../shared/icons/fam/error.png);
32 }
33
34 .x-ie6 .x-action-col-cell img.buy-col {
35 background-image: url(../shared/icons/fam/accept.gif);
36 }
37 .x-ie6.x-action-col-cell img.alert-col {
38 background-image: url(../shared/icons/fam/error.gif);
39 }
40
41 .x-ie6 .x-action-col-cell img {
42 position:relative;
43 top:-1px;
44 }
45 </style>
46 <script type="text/javascript" src="aria-grid.js"></script>
47</head>
48<body>
49 <h1>Stateful ARIA compliant Grid Example</h1>
50 <p>This example shows how to create an ARIA compliant grid from Array data.</p>
51 <p>The grid is stateful so you can move or hide columns, reload the page, and come
52 back to the grid in the same state you left it in.</p>
53 <p>Note that the js is not minified so it is readable. See <a href="aria-grid.js">aria-grid.js</a>.</p>
54 <div id="grid-example"></div>
55</body>
56</html>