Blame | Last modification | View Log | RSS feed
<!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=truereturn 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 thatway 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 serverand its not assumed that the client (the store) does the paging on the old data.<pre><div dojoType="ServerPagingReadStore" jsId="serverPagingStore" url="stores/QueryReadStore.php" requestMethod="get" doClientPaging="false"></div><input dojoType="dijit.form.ComboBox" store="serverPagingStore" pageSize="10" /></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>