wangdaping
/
wp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dijit/themes/tundra/tundra_rtl.css";
	</style>

	<title>Query read store</title>

	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
	<script type="text/javascript" src="../../../dojo/data/util/simpleFetch.js"></script>
	<script type="text/javascript" src="../../../dojox/data/QueryReadStore.js"></script>
	<script type="text/javascript">
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.FilteringSelect");
		dojo.require("dojox.data.QueryReadStore");

		dojo.provide("ComboBoxReadStore");
		dojo.declare("ComboBoxReadStore", dojox.data.QueryReadStore, {
			fetch:function(request) {
				// Copy the GET/POST parameters (request.query) we need into
				// request.serverQuery. We actually want to have
				// the query added to the URL like so:  /url.php?q=<searchString>
				// The data in "queryOptions" are useless for our backend,
				// we ignore them, they are not sent to the server.
				// The combobox puts this into the request-parameter:
				//      {
				//          query: {name:<searchString>},
				//          queryOptions: {ignoreCase:true, deep:true},
				//          ...
				//      }
				// We generate request.serverQuery to be this, since those values will
				// be sent to the server.
				//      {
				//          q:<searchString>}
				//      }
				// This results in a xhr request to the following URL (in case of GET):
				//      /url.php?q=<searchString>
				//

				request.serverQuery = {q:request.query.name};
				// If we wanted to send the queryOptions too, we could simply do:
				//  request.serverQuery = {
				//          q:request.query.name,
				//          ignoreCase:request.queryOptions.ignoreCase,
				//          deep:request.queryOptions.deep
				//      };
				// This would then result in this URL, for ignoreCase and deep
				// assumed to be true:
				//      /url.php?q=<searchString>&ignoreCase=true&deep=true
				return this.inherited("fetch", arguments);
			}
		});

		dojo.provide("ServerPagingReadStore");
		dojo.declare("ServerPagingReadStore", dojox.data.QueryReadStore, {
			fetch:function(request) {
				request.serverQuery = {q:request.query.name, start:request.start, count:request.count};
				return this.inherited("fetch", arguments);
			}
		});

		var testStore = new dojox.data.QueryReadStore({url:'stores/QueryReadStore.php'});;
		function doSearch() {
			var queryOptions = {};
			if (dojo.byId("ignoreCaseEnabled").checked) {
				queryOptions.ignoreCase = dojo.query("#fetchForm")[0].ignoreCase[0].checked;
			}
			if (dojo.byId("deepEnabled").checked) {
				queryOptions.deep = dojo.query("#fetchForm")[0].deep[0].checked;
			}
		    
			var query = {};
			query.q = dojo.byId("searchText").value;
			var request = {query:query, queryOptions:queryOptions};
			request.start = parseInt(dojo.query("#fetchForm")[0].pagingStart.value);
			request.count = parseInt(dojo.query("#fetchForm")[0].pagingCount.value);

			var requestMethod = "get";
			var radioButtons = dojo.query("#fetchForm")[0].requestMethod;
			for (var i=0; i<radioButtons.length; i++){
				if (radioButtons[i].checked) {
					requestMethod = radioButtons[i].value;
				}
			}
			
			testStore.requestMethod = requestMethod;
			testStore.doClientPaging = dojo.query("#fetchForm")[0].doClientPaging.checked;
			
			if (!testStore.doClientPaging) {
				// We have to fill the serverQuery, since we also want to send the
				// paging data "start" and "count" along with what is in query.
				request.serverQuery = {q:request.query.q, start:request.start, count:request.count};
			}
			
			request.onComplete = function (items) {
				var s = "number of items: "+items.length+"<br /><br />";
				for (var i=0; i<items.length; i++) {
					s += i+": name: '"+testStore.getValue(items[i], "name")+"'<br />";
				}
				//s += "<pre>"+dojo.toJson(items)+"</pre>";
				dojo.byId("fetchOutput").innerHTML = s;
			};

			console.log(dojo.toJson(request));
			testStore.fetch(request);
		}
	</script>
</head>
<body class="tundra" style="margin:20px;">
	<div dojoType="ComboBoxReadStore" jsId="store" url="stores/QueryReadStore.php" requestMethod="get"></div>
	This is a ComboBox: <input id="cb" dojoType="dijit.form.ComboBox" store="store" pageSize="5" />
	<br /><br /><hr />

	This is a FilteringSelect: <input id="fs" dojoType="dijit.form.FilteringSelect" store="store" pageSize="5" />
	<br />
	<form id="filteringSelectForm">
		<input id="selectById" value="0" size="3" />
		<input type="button" value="set by id" onclick="dijit.byId('fs').setValue(dojo.byId('selectById').value)" />
	</form>
	
	<br /><br /><hr />

	This ComboBox uses a customized QueryReadStore, it prepares the query-string for the URL that
	way that the paging parameters "start" and "count" are also send.<br />
	<div dojoType="ServerPagingReadStore" jsId="serverPagingStore" url="stores/QueryReadStore.php" requestMethod="get" doClientPaging="false"></div>
	<input dojoType="dijit.form.ComboBox" store="serverPagingStore" pageSize="5" />
	<br />
	<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>
<div id="pagingCode" style="display:none;">
	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
	and its not assumed that the client (the store) does the paging on the old data.
	<pre>
&lt;div dojoType="ServerPagingReadStore" jsId="serverPagingStore" url="stores/QueryReadStore.php" requestMethod="get" doClientPaging="false"&gt;&lt;/div&gt;
&lt;input dojoType="dijit.form.ComboBox" store="serverPagingStore" pageSize="10" /&gt;
	</pre>
	<pre>
		dojo.require("dojox.data.QueryReadStore");
		dojo.provide("ServerPagingReadStore");
		dojo.declare("ServerPagingReadStore", dojox.data.QueryReadStore, {
			fetch:function(request) {
				request.serverQuery = {q:request.query.name, start:request.start, count:request.count};
				return this.inherited("fetch", arguments);
			}
		});
	</pre>
</div>
	<br /><br />
	
	<hr />
	
	<style>
	     fieldset {
	         border:1px solid black;
	         display:inline;
	         padding:10px;
	     }
	     div.disabled {
	         opacity:0.1;
	     }
	</style>
	<form id="fetchForm">
		<fieldset title="requestMethod">
		    <legend>requestMethod</legend>
			get <input type="radio" value="get" checked="checked" name="requestMethod" />
			post <input type="radio" value="post" name="requestMethod" />
		</fieldset>
		
		<fieldset title="queryOptions">
			<legend>queryOptions</legend>

			<fieldset id="ignoreCaseFieldset">
				<legend><input type="checkbox" id="ignoreCaseEnabled" /> ignoreCase</legend>
				<div class="disabled">
					true <input type="radio" value="0" checked="checked" name="ignoreCase" />
					false <input type="radio" value="1" name="ignoreCase" />
				</div>
			</fieldset>
			<fieldset id="deepFieldset">
				<legend><input type="checkbox" id="deepEnabled" /> deep</legend>
				<div class="disabled">
					true <input type="radio" value="0" name="deep" />
					false <input type="radio" value="1" name="deep" checked="checked" />
				</div>
			</fieldset>
		</fieldset>
		<fieldset title="paging">
			<legend>paging</legend>
			start: <input id="pagingStart" value="0" size="3" />
			count: <input id="pagingCount" value="10" size="3"  />
			<br /><br />
			do client paging: <input id="doClientPaging" type="checkbox" checked="checked" />
		</fieldset>
		<script>
		    var fieldsets = ["ignoreCaseFieldset", "deepFieldset"];
		    for (var i=0; i<fieldsets.length; i++) {
		        dojo.connect(dojo.byId(fieldsets[i]), "onchange", toggleFieldset);
		    }
		    function toggleFieldset(el) {
		        var divs = dojo.query("div", el.target.parentNode.parentNode);
		        if (divs.length) {
					var div = divs[0];
					if (el.target.checked) {
						dojo.removeClass(div, "disabled");
					} else {
						dojo.addClass(div, "disabled");
					}
				}
		    }
		</script>
		
		<br /><br />
		<input id="searchText" type="text" value="a">
		<input id="searchButton" type="button" value="store.fetch()" onclick="doSearch()" />
	</form>
	<div id="fetchOutput" style="background-color:#FFDDDD; margin-top:1em; float:left;"></div>
</body>
</html>