Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 
		"http://www.w3.org/TR/html4/strict.dtd">
3 
<html>
4 
<head>
5 
	<style type="text/css">
6 
		@import "../../../dojo/resources/dojo.css";
7 
		@import "../../../dijit/themes/tundra/tundra.css";
8 
		@import "../../../dijit/themes/tundra/tundra_rtl.css";
9 
	</style>
10 
 
11 
	<title>Query read store</title>
12 
 
13 
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
14 
	<script type="text/javascript" src="../../../dojo/data/util/simpleFetch.js"></script>
15 
	<script type="text/javascript" src="../../../dojox/data/QueryReadStore.js"></script>
16 
	<script type="text/javascript">
17 
		dojo.require("dijit.form.ComboBox");
18 
		dojo.require("dijit.form.FilteringSelect");
19 
		dojo.require("dojox.data.QueryReadStore");
20 
 
21 
		dojo.provide("ComboBoxReadStore");
22 
		dojo.declare("ComboBoxReadStore", dojox.data.QueryReadStore, {
23 
			fetch:function(request) {
24 
				// Copy the GET/POST parameters (request.query) we need into
25 
				// request.serverQuery. We actually want to have
26 
				// the query added to the URL like so:  /url.php?q=<searchString>
27 
				// The data in "queryOptions" are useless for our backend,
28 
				// we ignore them, they are not sent to the server.
29 
				// The combobox puts this into the request-parameter:
30 
				//      {
31 
				//          query: {name:<searchString>},
32 
				//          queryOptions: {ignoreCase:true, deep:true},
33 
				//          ...
34 
				//      }
35 
				// We generate request.serverQuery to be this, since those values will
36 
				// be sent to the server.
37 
				//      {
38 
				//          q:<searchString>}
39 
				//      }
40 
				// This results in a xhr request to the following URL (in case of GET):
41 
				//      /url.php?q=<searchString>
42 
				//
43 
 
44 
				request.serverQuery = {q:request.query.name};
45 
				// If we wanted to send the queryOptions too, we could simply do:
46 
				//  request.serverQuery = {
47 
				//          q:request.query.name,
48 
				//          ignoreCase:request.queryOptions.ignoreCase,
49 
				//          deep:request.queryOptions.deep
50 
				//      };
51 
				// This would then result in this URL, for ignoreCase and deep
52 
				// assumed to be true:
53 
				//      /url.php?q=<searchString>&ignoreCase=true&deep=true
54 
				return this.inherited("fetch", arguments);
55 
			}
56 
		});
57 
 
58 
		dojo.provide("ServerPagingReadStore");
59 
		dojo.declare("ServerPagingReadStore", dojox.data.QueryReadStore, {
60 
			fetch:function(request) {
61 
				request.serverQuery = {q:request.query.name, start:request.start, count:request.count};
62 
				return this.inherited("fetch", arguments);
63 
			}
64 
		});
65 
 
66 
		var testStore = new dojox.data.QueryReadStore({url:'stores/QueryReadStore.php'});;
67 
		function doSearch() {
68 
			var queryOptions = {};
69 
			if (dojo.byId("ignoreCaseEnabled").checked) {
70 
				queryOptions.ignoreCase = dojo.query("#fetchForm")[0].ignoreCase[0].checked;
71 
			}
72 
			if (dojo.byId("deepEnabled").checked) {
73 
				queryOptions.deep = dojo.query("#fetchForm")[0].deep[0].checked;
74 
			}
75 
 
76 
			var query = {};
77 
			query.q = dojo.byId("searchText").value;
78 
			var request = {query:query, queryOptions:queryOptions};
79 
			request.start = parseInt(dojo.query("#fetchForm")[0].pagingStart.value);
80 
			request.count = parseInt(dojo.query("#fetchForm")[0].pagingCount.value);
81 
 
82 
			var requestMethod = "get";
83 
			var radioButtons = dojo.query("#fetchForm")[0].requestMethod;
84 
			for (var i=0; i<radioButtons.length; i++){
85 
				if (radioButtons[i].checked) {
86 
					requestMethod = radioButtons[i].value;
87 
				}
88 
			}
89 
 
90 
			testStore.requestMethod = requestMethod;
91 
			testStore.doClientPaging = dojo.query("#fetchForm")[0].doClientPaging.checked;
92 
 
93 
			if (!testStore.doClientPaging) {
94 
				// We have to fill the serverQuery, since we also want to send the
95 
				// paging data "start" and "count" along with what is in query.
96 
				request.serverQuery = {q:request.query.q, start:request.start, count:request.count};
97 
			}
98 
 
99 
			request.onComplete = function (items) {
100 
				var s = "number of items: "+items.length+"<br /><br />";
101 
				for (var i=0; i<items.length; i++) {
102 
					s += i+": name: '"+testStore.getValue(items[i], "name")+"'<br />";
103 
				}
104 
				//s += "<pre>"+dojo.toJson(items)+"</pre>";
105 
				dojo.byId("fetchOutput").innerHTML = s;
106 
			};
107 
 
108 
			console.log(dojo.toJson(request));
109 
			testStore.fetch(request);
110 
		}
111 
	</script>
112 
</head>
113 
<body class="tundra" style="margin:20px;">
114 
	<div dojoType="ComboBoxReadStore" jsId="store" url="stores/QueryReadStore.php" requestMethod="get"></div>
115 
	This is a ComboBox: <input id="cb" dojoType="dijit.form.ComboBox" store="store" pageSize="5" />
116 
	<br /><br /><hr />
117 
 
118 
	This is a FilteringSelect: <input id="fs" dojoType="dijit.form.FilteringSelect" store="store" pageSize="5" />
119 
	<br />
120 
	<form id="filteringSelectForm">
121 
		<input id="selectById" value="0" size="3" />
122 
		<input type="button" value="set by id" onclick="dijit.byId('fs').setValue(dojo.byId('selectById').value)" />
123 
	</form>
124 
 
125 
	<br /><br /><hr />
126 
 
127 
	This ComboBox uses a customized QueryReadStore, it prepares the query-string for the URL that
128 
	way that the paging parameters "start" and "count" are also send.<br />
129 
	<div dojoType="ServerPagingReadStore" jsId="serverPagingStore" url="stores/QueryReadStore.php" requestMethod="get" doClientPaging="false"></div>
130 
	<input dojoType="dijit.form.ComboBox" store="serverPagingStore" pageSize="5" />
131 
	<br />
132 
	<a href="javascript://" onclick="var d = dojo.byId('pagingCode'); d.style.display= d.style.display=='none'?'block':'none';">Click here to  see the code!</a>
133 
<div id="pagingCode" style="display:none;">
134 
	The HTML might look like this, the important attribute: <em>doClientPaging="false"</em> this takes care that the same query is fired to the server
135 
	and its not assumed that the client (the store) does the paging on the old data.
136 
	<pre>
137 
&lt;div dojoType="ServerPagingReadStore" jsId="serverPagingStore" url="stores/QueryReadStore.php" requestMethod="get" doClientPaging="false"&gt;&lt;/div&gt;
138 
&lt;input dojoType="dijit.form.ComboBox" store="serverPagingStore" pageSize="10" /&gt;
139 
	</pre>
140 
	<pre>
141 
		dojo.require("dojox.data.QueryReadStore");
142 
		dojo.provide("ServerPagingReadStore");
143 
		dojo.declare("ServerPagingReadStore", dojox.data.QueryReadStore, {
144 
			fetch:function(request) {
145 
				request.serverQuery = {q:request.query.name, start:request.start, count:request.count};
146 
				return this.inherited("fetch", arguments);
147 
			}
148 
		});
149 
	</pre>
150 
</div>
151 
	<br /><br />
152 
 
153 
	<hr />
154 
 
155 
	<style>
156 
	     fieldset {
157 
	         border:1px solid black;
158 
	         display:inline;
159 
	         padding:10px;
160 
	     }
161 
	     div.disabled {
162 
	         opacity:0.1;
163 
	     }
164 
	</style>
165 
	<form id="fetchForm">
166 
		<fieldset title="requestMethod">
167 
		    <legend>requestMethod</legend>
168 
			get <input type="radio" value="get" checked="checked" name="requestMethod" />
169 
			post <input type="radio" value="post" name="requestMethod" />
170 
		</fieldset>
171 
 
172 
		<fieldset title="queryOptions">
173 
			<legend>queryOptions</legend>
174 
 
175 
			<fieldset id="ignoreCaseFieldset">
176 
				<legend><input type="checkbox" id="ignoreCaseEnabled" /> ignoreCase</legend>
177 
				<div class="disabled">
178 
					true <input type="radio" value="0" checked="checked" name="ignoreCase" />
179 
					false <input type="radio" value="1" name="ignoreCase" />
180 
				</div>
181 
			</fieldset>
182 
			<fieldset id="deepFieldset">
183 
				<legend><input type="checkbox" id="deepEnabled" /> deep</legend>
184 
				<div class="disabled">
185 
					true <input type="radio" value="0" name="deep" />
186 
					false <input type="radio" value="1" name="deep" checked="checked" />
187 
				</div>
188 
			</fieldset>
189 
		</fieldset>
190 
		<fieldset title="paging">
191 
			<legend>paging</legend>
192 
			start: <input id="pagingStart" value="0" size="3" />
193 
			count: <input id="pagingCount" value="10" size="3"  />
194 
			<br /><br />
195 
			do client paging: <input id="doClientPaging" type="checkbox" checked="checked" />
196 
		</fieldset>
197 
		<script>
198 
		    var fieldsets = ["ignoreCaseFieldset", "deepFieldset"];
199 
		    for (var i=0; i<fieldsets.length; i++) {
200 
		        dojo.connect(dojo.byId(fieldsets[i]), "onchange", toggleFieldset);
201 
		    }
202 
		    function toggleFieldset(el) {
203 
		        var divs = dojo.query("div", el.target.parentNode.parentNode);
204 
		        if (divs.length) {
205 
					var div = divs[0];
206 
					if (el.target.checked) {
207 
						dojo.removeClass(div, "disabled");
208 
					} else {
209 
						dojo.addClass(div, "disabled");
210 
					}
211 
				}
212 
		    }
213 
		</script>
214 
 
215 
		<br /><br />
216 
		<input id="searchText" type="text" value="a">
217 
		<input id="searchButton" type="button" value="store.fetch()" onclick="doSearch()" />
218 
	</form>
219 
	<div id="fetchOutput" style="background-color:#FFDDDD; margin-top:1em; float:left;"></div>
220 
</body>
221 
</html>