Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 105 lines (96 sloc) 3.561 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
<!DOCTYPE html>
<html>
<head>
<title>Test Skin</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=570" />
<link rel="stylesheet" href="../../dojo/resources/dojo.css"/>
<style>
h2 {
font-weight: bold;
padding-bottom: 0.25em;
}

/* add styles to size this grid appropriately */
#grid {
height: 20em;
margin: 10px;
}
#grid .field-col2 {
width: 8%;
}
#grid .field-col1, #grid .field-col3, #grid .field-col5 {
width: 15%;
}
</style>
</head>
<body>
<h2>A basic grid using the <span id="skin"></span> skin</h2>
<div id="grid"></div>
<div><button type="button" onclick="grid.save();">Save</button>
(for testing highlight color)</div>
<h2>Test more skins!</h2>
<p>Loading dgrid.css before skin:<span id="skinlast"></span></p>
<p>Loading dgrid.css after skin:<span id="skinfirst"></span></p>
<script src="../../dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require(["dojo/io-query"], function(ioq){
var
// retrieve query parameters
q = location.search,
params = q ? ioq.queryToObject(q.substr(1)) : {},
// honor skin specification from query param
skin = params.skin || "claro",
xstylePrefix = "xstyle/css!dgrid/css/",
xstyleBase = xstylePrefix + "dgrid.css",
xstyleRtl = xstylePrefix + "dgrid_rtl.css",
xstyleSkin = xstylePrefix + "skins/" + skin + ".css",
// put CSS first to control loading order (don't let List load it)
// decide whether dgrid.css or skin CSS is loaded first via query param
deps = params.skinFirst ? [xstyleSkin, xstyleBase, xstyleRtl] :
[xstyleBase, xstyleRtl, xstyleSkin],
rtl = params.dir == "rtl";

// add skin class to body
document.body.className = skin;
// add dir=rtl to body if specified in query
rtl && (document.body.dir = "rtl");

// then add the rest of the dependencies for the test...
deps = deps.concat("dgrid/List", "dgrid/OnDemandGrid", "dgrid/tree",
"dgrid/Selection", "dgrid/Keyboard", "dgrid/editor",
"dojo/_base/declare", "dojo/dom-construct", "dgrid/test/data/base", "dojo/domReady!");

require(deps,
function(css1, css2, css3, List, Grid, tree, Selection, Keyboard, editor, declare, domConstruct, testStore){
var
columns = {
col1: "Column 1",
col2: editor({label: 'Column 2', sortable: false, editor: "checkbox"}),
col3: "Column 3",
col4: "Column 4",
col5: "Column 5"
},
skins = ["claro", "tundra", "nihilo", "soria",
"slate", "sage", "cactus", "squid"],
i, l = skins.length,
href, slhtml = [], sfhtml = [];

function byId(id){
return document.getElementById(id);
}

// mention (in heading) which skin is being displayed
byId("skin").innerHTML = skin;

// add links to test all skins, w/ dgrid.css loaded first/last
for(i = 0; i < l; i++){
href = "skin.html?skin=" + skins[i];
rtl && (href += "&dir=rtl");

slhtml.push('<a href="' + href + '">' + skins[i] + '</a>');
sfhtml.push('<a href="' + href + '&skinFirst=true">' + skins[i] + '</a>');
}
byId("skinlast").innerHTML = slhtml.join(" / ");
byId("skinfirst").innerHTML = sfhtml.join(" / ");

window.grid = new (declare([Grid, Selection, Keyboard]))({
store: testStore,
columns: columns
}, "grid");
}); // end of inner require (dgrid, etc.)
}); // end of outer require (io-query)
</script>
</body>
</html>
Something went wrong with that request. Please try again.