Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
--- a/master/examples/demo_CssStores_combo_tree_grid.html
+++ b/master/examples/demo_CssStores_combo_tree_grid.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<!--
+	Demo application showing The CssClassStore.
+-->
+<html>
+<head>
+	<title>Demo:  dojox.data.CssClassStore</title>
+	<style type="text/css">
+		@import "../../../dijit/themes/tundra/tundra.css";
+		@import "../../../dojo/resources/dojo.css";
+		@import "../../../dijit/tests/css/dijitTests.css";
+  		@import "../../grid/resources/tundraGrid.css";
+	</style>
+
+	<!--
+		The following script tag instantiates the dojo library and sets some basic properties.  In this case, the application
+		is told that debug mode is off, and to parse all dojoType widgets when it has fully loaded.
+	-->
+	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
+	<script>
+		dojo.require("dijit.Tree");
+		dojo.require("dijit.tree.ForestStoreModel");
+		dojo.require("dijit.form.ComboBox");
+		dojo.require("dojox.data.CssRuleStore");
+		dojo.require("dojox.data.CssClassStore");
+		dojo.require("dojox.grid.DataGrid");
+
+		var layoutCss = [
+			[
+				{ field: "selector", name: "Selector", width: 20 },
+				{ field: "parentStyleSheetHref", name: "StyleSheet", width: 20 },
+				{ field: "cssText", name: "CSS", width: 'auto' }
+			]
+		];
+
+		function init() {
+			var combo = dijit.byId("classCombo");
+			var grid = dijit.byId("cssGrid");
+			
+			function requery() {
+				var val = combo.getValue();
+				val = "." + val;
+				var query = {
+					selector: "*" + val + "*"
+				}
+				grid.filter(query,true);
+			}
+			dojo.connect(combo, "onChange", requery);
+		}
+		dojo.addOnLoad(init);
+
+	</script>
+</head>
+
+<body class="tundra">
+	<h1>
+		Demo:  Demo of using the Css Stores to browse the loaded CSS classes and associated rules.
+	</h1>
+	<p>This demo demonstrates hooking up the Css*Stores to the various digit widgets to browse the Css loaded for the page.</p>
+	<hr>
+
+	<div dojoType="dojox.data.CssRuleStore" jsId="ruleStore"></div>
+	<div dojoType="dojox.data.CssClassStore" jsId="classStore"></div>
+	
+
+	<div dojoType="dijit.tree.ForestStoreModel" 
+		 jsId="classModel" 
+		 store="classStore" 
+		 query="{}"
+		 rootId="Loaded Classes" 
+		 rootLabel="Loaded Classes" 
+		 childrenAttrs="children">
+	</div>
+
+	<h2>dojox.data.CssClassStore connected to ComboBox and querying on classSans:</h2>
+	<div id="classCombo" dojoType="dijit.form.ComboBox"  store="classStore" searchAttr="classSans"></div> 
+
+	<h2>dojox.data.CssRuleStore:</h2>
+	<i>Displays the list of CSS rules filtered by the class selected in the ComboBox.</i>
+	<div id="cssGrid"
+		 jsId="cssGrid" 
+		 dojoType="dojox.grid.DataGrid" 
+		 query="{}" 
+		 rowsPerPage="20"
+		 store="ruleStore" 
+		 structure="layoutCss"
+		 style="width: 100%; height: 400px;">
+	</div>
+
+	<h2>dojox.data.CssClassStore connected to Tree:</h2>
+	<span id="tree" dojoType="dijit.Tree" model="classModel"> </span>
+	<hr>
+</body>
+</html>