221 lines
8.1 KiB
HTML
221 lines
8.1 KiB
HTML
|
<!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"></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.
|
||
|
|
<pre>
|
||
|
|
<div dojoType="ServerPagingReadStore" jsId="serverPagingStore" url="stores/QueryReadStore.php" requestMethod="get"></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>
|